当我在搜索框中输入时，将结果字母加粗

Question

我正在使用 Opencart v2.2.0。搜索框是自动完成的，那部分没问题。但现在我需要在搜索框中输入粗体字。

示例： 用户开始输入“some”，当他输入时，结果是：

一些东西

敬畏一些

等等

注意：“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 上执行下面的函数，然后你只需要显示 HTML 中的结果数组（ 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;

}