HTML中的jQuery文本突出显示

Question

我有一个文本字段，用户可以在其中搜索地点名称。如何突出显示结果上的文字排除结果中显示的用户输入的内容？以下是我在jQuery中的代码：

<input maxlength="64" id="war_desc" name="searchtext" size="20" class="form200" autocomplete="off" value="">

<div class="auto-complete autocomplete_choices" data-component-bound="true" style="top: 352px; left: 352.5px; width: 172px; display: none;">
<ul>
        <!-- Search result will be append here by html() -->
</ul>
</div>

<script type="text/javascript">
$('#war_desc').keyup(function(e){
    var search_place = $(this).val();
    if(search_place == ''){
        $('.autocomplete_choices').hide();
    } else {
        $.ajax({
            url:'".$baseUrl."business/searchnew"."',
            data:{'search_place':$(this).val()},
            dataType:'json',
            Type:'POST',
            cache:false,
            success:function(data){

                var listHtml = '';
                for(var i=0; i<data.length; i++){
                listHtml += '<li class="item" data-display-value="Shoe Exchange" title=Shoe Exchange>'+data[i]['business_name']+'</li>';
            }
                $('.autocomplete_choices').show();
                $('.autocomplete_choices ul').html(listHtml);
            }
        });
    }
})
</script>

以下是描述我的问题的图片：

谢谢！

Answer 1

在这里使用peterm发现的答案

Simple Text Highlight with jQuery

从

更改最后一行

$(this).html(text.replace(new RegExp("(" + keywords.join('|') + ")" , 'gi'), "<b>$1</b>"));

到

$(this).html('<b>' + text.replace(new RegExp("(" + keywords.join('|') + ")" , 'gi'), "</b>$1<b>")) + '</b>';

Demo

Answer 2

您可以使用这个简单的字符串替换方法

var str = "Hello zlippr";
str = "Hello"+str.replace(str,"<b>"+str+"</b>").replace("Hello","")
document.writeln(str)

您的代码将是这样的

data[i]['business_name'] = $(this).val()+data[i]['business_name'].replace(data[i]['business_name'],"<b>"+data[i]['business_name']+"</b>").replace($(this).val(),"")
'<li class="item" data-display-value="Shoe Exchange" title=Shoe Exchange>'+data[i]['business_name']+'</li>';