javascript - 当我在搜索框中输入时，将结果字母设为粗体

Question

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

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

一些事情

敬畏一些

等等

注意:“某事”和“棒极了”这两个词只是一个例子，我实时不知道用户会输入什么搜索词。

到目前为止，我已经有了这段代码，但由于我并不是真正的 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>';
    });
}