在搜索框中鍵入結果字母加粗

Question

我正在使用Opencart v2.2.0。搜索框是自動完成的，該部分沒有問題。但是現在，我需要在搜索框中輸入字母時加粗。

例子： 用戶開始輸入 「一些」，併爲他的類型，結果是：

一些事情

敬畏一些

等

注意：「something」和「awesome」這些詞僅僅是一個例子，實時我不知道用戶輸入什麼搜索詞。

到目前爲止，我有這個代碼，但由於我不是一個真正的js/jquery專家，我需要幫助實現上層請求。謝謝你們。

//<![CDATA[ 

function doLiveSearch(ev, keywords) { 

    if(ev.keyCode == 38 || ev.keyCode == 40) { 
     return false; 
    } 

    $('#autosearch_search_results').remove(); 
    updown = -1; 

    if(keywords == '' || keywords.length < 2) { 
     return false; 
    } 
    keywords = encodeURI(keywords); 

    $.ajax({url: $('base').attr('href') + 'index.php?route=module/autosearch/ajax_asr&keyword=' + keywords, dataType: 'json', success: function(result) { 
     if(result.length > 0) { 
      var eList = document.createElement('ul'); 
      eList.id = 'autosearch_search_results'; 
      var eListElem; 
      var eLink; 
      var eImage; 

      for(var i in result) { 
       eListElem = document.createElement('li'); 
       eLink = document.createElement('a'); 

      if((result[i].thumb) != '') 
      { 
       eImage = document.createElement('img'); 
       eImage.src = result[i].thumb; 
       eLink.appendChild(eImage);     

      } 
// name 
var el_span = document.createElement('name'); 
    var textNode = document.createTextNode(result[i].name); 
    eLink.appendChild(el_span); 
    el_span.appendChild(textNode); 

// model 
      if((result[i].model) != '') 
      { 
var el_span = document.createElement('model'); 
    var textNode = document.createTextNode(result[i].model); 
    eLink.appendChild(el_span); 
    el_span.appendChild(textNode); 
      } 

       if(typeof(result[i].href) != 'undefined') { 
        eLink.href = result[i].href; 
       } 
       else { 
        eLink.href = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords; 
       } 
       eListElem.appendChild(eLink); 

      if((result[i].price) != '') 
      { 

var br = document.createElement("br"); 
eLink.appendChild(br); 

// special price 
    if((result[i].special) != '') 
     { 

var el_span = document.createElement('special-price'); 
    var textNode = document.createTextNode(result[i].special); 
    eLink.appendChild(el_span); 
    el_span.appendChild(textNode); 
     } 

// price 
var el_span = document.createElement('price'); 
    var textNode = document.createTextNode(result[i].price); 
    eLink.appendChild(el_span); 
    el_span.appendChild(textNode); 
      } 

// quantity/stock 
      if((result[i].stock) != '') 
      { 

var br = document.createElement("br"); 
eLink.appendChild(br); 
eLink.appendChild(document.createTextNode(result[i].stock)); 
      } 

       eList.appendChild(eListElem); 
      } 
      if($('#autosearch_search_results').length > 0) { 
       $('#autosearch_search_results').remove(); 
      } 

      //view all results 
      if((result[i].viewall) != '') 
      { 
      eListElem = document.createElement('li'); 
      eLink = document.createElement('a'); 
       var el_span = document.createElement('viewall'); 
       var textNode = document.createTextNode(result[i].viewall); 
       eLink.appendChild(el_span); 
       el_span.appendChild(textNode); 
       eLink.href = $('base').attr('href') + 'index.php?route=product/search&search=' + keywords; 
      eListElem.appendChild(eLink); 
      eList.appendChild(eListElem); 
      } 

      $('#search').append(eList); 
     } 
    }}); 

    return true; 
} 

function upDownEvent(ev) { 
    var elem = document.getElementById('autosearch_search_results'); 
    var fkey = $('#search').find('[name=search]').first(); 


    if(elem) { 
     var length = elem.childNodes.length - 1; 

     if(updown != -1 && typeof(elem.childNodes[updown]) != 'undefined') { 
      $(elem.childNodes[updown]).removeClass('highlighted'); 
     } 

     // Up 
     if(ev.keyCode == 38) { 
      updown = (updown > 0) ? --updown : updown; 
     } 
     else if(ev.keyCode == 40) { 
      updown = (updown < length) ? ++updown : updown; 
     } 

     if(updown >= 0 && updown <= length) { 
      $(elem.childNodes[updown]).addClass('highlighted'); 

      var text = elem.childNodes[updown].childNodes[0].text; 
      if(typeof(text) == 'undefined') { 
       text = elem.childNodes[updown].childNodes[0].innerText; 
      } 

     } 
    } 

    return false; 
} 

var updown = -1; 

$(document).ready(function(){ 
    $('#search').find('[name=search]').attr('autocomplete', 'off'); //disable autocomplete 

    $('#search').find('[name=search]').first().keyup(function(ev){ 
     doLiveSearch(ev, this.value); 
    }).focus(function(ev){ 
     doLiveSearch(ev, this.value); 
    }).keydown(function(ev){ 
     upDownEvent(ev); 
    }).blur(function(){ 
     window.setTimeout("$('#autosearch_search_results').remove();updown=0;", 1500); 
    }); 
    $(document).bind('keydown', function(ev) { 
     try { 
      if(ev.keyCode == 13 && $('.highlighted').length > 0) { 
       document.location.href = $('.highlighted').find('a').first().attr('href'); 
      } 
     } 
     catch(e) {} 
    }); 
}); 
//]]> 

Answer 1

只需添加一個功能，突出顯示所有搜索到的文字到底運行在每個文本添加到您的html：

function highlightQuery(string,searchQuery){ 
    if(!string){ 
     return ""; 
    } 
    var expr = searchQuery; 
    expr = expr.replace(/\s+/, "|",searchQuery); 
    var regex = new RegExp(expr,"gi"); 
    return string.replace(regex, function($1){ 
     return '<span class="highlight">'+ $1 +'</span>'; 
    }); 
} 

Answer 2

我們正在努力做的JavaScript的 格式化部分，使只能在HTML部分執行顯示

在typeahead上執行以下功能，然後您只需顯示 生成的數組（formattedResult）。

formattedResult將包含格式化文本。

在HTML中顯示formattedResult數組時，將第二個位置文本 以粗體顯示在每個迭代項中。

請嘗試以下代碼： -

//argument types searchList(Array) and searchWord(String) 
function formatResult(searchList, searchWord){ 
var formattedResult = [[]]; 

for(var prop in searchList){ 
    if(searchList[prop].indexOf("some")!=-1) 
     { 
      var index= searchList[prop].indexOf(searchWord); 


      var temp = []; 

      temp.push(searchList[prop].substring(0,index)); 

      temp.push(searchWord.toUpperCase()); 


      temp.push(searchList[prop].substring(index + searchWord.length, 
      searchList[prop].length)); 

      //console.log(temp); 
      formattedResult.push(temp); 

     } 
    else{ 
     formattedResult.push(searchList[prop]) 
    } 
    } 
    return formattedResult; 

}