2010-06-16 127 views

回答

2

看起來像什麼在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>在服務器端換行,因爲它很可能已經循環遍歷每個結果。

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); 
    };