2013-03-08 157 views
-1

我有一个文本字段,用户可以在其中搜索位置名称。如何突出显示结果上的文字,但不包括用户输入的内容显示在结果上?以下是我在jQuery代码:HTML中的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> 

以下是描述我的问题的图像:

enter image description here

谢谢!

+0

的回答,请参阅本http://stackoverflow.com/a/14164015/1920232 – peterm 2013-03-08 03:40:05

+1

OP希望做这个答案的反面 – Popnoodles 2013-03-08 03:42:14

+0

@peterm这是反向伙伴 – d3bug3r 2013-03-08 03:44:23

回答

0

使用的答案在这里,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

+0

我如何添加您的代码与我的? – d3bug3r 2013-03-08 03:51:29

0

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

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

我如何使用它与我上面的代码?看看listHtml + = – d3bug3r 2013-03-08 04:17:23

+0

我已经更新了代码,请检查它 – NARENDRA 2013-03-08 04:20:39