如何突出顯示單詞jquery ui自動完成

Question

我使用此腳本http://jqueryui.com/demos/autocomplete/#default與數據庫。我想突出顯示類似這樣的單詞：www.docs.jquery.com/Plugins/Autocomplete。請幫幫我。

Answer 1

看起來像什麼在http://docs.jquery.com/Plugins/Autocomplete上運行有一個突出顯示的方法。

您可以通過抓取正則表達式的亮點方法，並用它來修改你的結果送回到從您的Ajax請求您重新創建該數據庫：

$("#example").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "search.php", 
      dataType: "json", 
      data: request, 
      success: function(data) { 

       var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
       var result = $.map(data, function(value){ 
        return value.replace(regex, "<strong>$1</strong>"); 
       }); 
       response(result); 
      } 
     }); 
    } 
}); 

它很可能是聰明添加<strong>在服務器端換行，因爲它很可能已經循環遍歷每個結果。

Answer 2

我不得不根據本Highlight jQuery UI autocomplete修改代碼，使其工作

 $("#searchBox").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "search.php", 
       dataType: "json", 
       data: request, 
       success: function(data) { 
        var escapedTerm=request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1"); 
        var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escapedTerm + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
        var result = $.map(data, function(value){ 
         //console.log(value); 
         value.label=value.label.replace(regex, "<span class='highlight'>$1</span>"); 
         return value; 
        }); 
        response(result); 
       } 
      }); 
     }, 
     minLength: 3 
    }) 
    .data('autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    };