jQuery text выделить в HTML

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>';