jQuery UI自動完成多項搜索

Question

我正在嘗試使用jQuery UI自動完成功能。在完成一些搜索之後，在簡單編寫我自己的代碼之前，可能已經有了解決方案。

我以前使用jQuery插件http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/，但出於各種原因想要遷移到集成在UI中的一個。

目前有兩件東西讓我質疑。

所選術語突出顯示和多項術語搜索/選擇以及如何實現這些術語。

下面是一個小提琴頁面：http://jsfiddle.net/vapc2/來展示這個例子。 鍵入「螞蟻」，它會照亮螞蟻。但是如果我輸入「螞蟻吉爾希爾」，它應該選擇並突出顯示所有帶有「螞蟻」的條目，全部用「吉爾」和全部用「山」來代替，而不是像現在這樣。基本上，如果一個術語出現在任何地方，在任何答案中，我希望返回該值並突出顯示該術語，即使它不是完全匹配，也只是它包含在答案的某處。所以如果我輸入「螞蟻蟲」，我想用這兩個單詞中的任何一個返回所有條目。

說我有下面的示例JSON對象：

var sampleAnswers = [ 
    { 
    "id": "00450", 
    "label": "Ants, Ants on a hill near Jill", 
    "Category": "Ants", 
    "value": "hill ant"}, 
{ 
    "id": "00450", 
    "label": "Ants, Ant not on a hill", 
    "Category": "Ants", 
    "value": "regular ant"}, 
{ 
    "id": "00452", 
    "label": "Some ants on a hill", 
    "Category": "Ants", 
    "value": "hill ants"}, 
{ 
    "id": "00454", 
    "label": "Red ants on a hill near Jill", 
    "Category": "Ants", 
    "value": "hill ant red"}, 
{ 
    "id": "00470", 
    "label": "Bugs on a rug", 
    "Category": "bugs", 
    "value": "rug bug"}, 
{ 
    "id": "00472", 
    "label": "rug bugs under the rug", 
    "Category": "bugs", 
    "value": "rug bug"}, 
{ 
    "id": "69000", 
    "label": "bed bugs", 
    "Category": "bed", 
    "value": "bed bugs"}, 
{ 
    "id": "69005", 
    "label": "Large complicated bed bugs", 
    "Category": "bugs", 
    "value": "bed bug"}, 
{ 
    "id": "69020", 
    "label": "red bed bugs", 
    "Category": "bugs", 
    "value": "red bugs"} 
]; 
function replaceWords(wordsy, text) { 
    //var re = '(' + words.join('|') + ')(?![^<]*(?:<\/script|>))', 
    var re = '(' + wordsy + ')(?![^<]*(?:<\/script|>))', 
     regExp = new RegExp(re, 'ig'), 
     sTag = "<span class='autoCompleteWord'>", 
     eTag = "</span>"; 
    return text.replace(regExp, sTag + '$&' + eTag); 
}; 
$("#tags").autocomplete({ 
    minLength: 1, 
    source: sampleAnswers, 
    delay: 1000, 
    focus: function(event, ui) { 
     $("#cpt").val(ui.item.label); 
     return false; 
    }, 
    open: function(event, ui) { 
     var myValue = $(this).val(); //get typed 
     $("ul.ui-autocomplete li a").each(function() { 
      var autoCompleteRow = $(this); 
      var htmlString = autoCompleteRow.html(); 
      var words = myValue.split(" "); 
      $('#mesText2').val(myValue + ":" + words.length); 
      var i = words.length; 
      while (i--) { 
       htmlString = replaceWords(words[i], htmlString); 
      }; 
      autoCompleteRow.html(htmlString); 
     }); 
    }, 
    select: function(event, ui) { 
     var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null); 
     $("#bugid").val(ui.item.id); 
     $("#bugcategory").val(ui.item.Category); 
     $("#bug").val(hasValue ? ui.item.value : ui.item.label); 
     $("#bugLabel").val(ui.item.label); 

     return false; 
    } 
}).data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.id + " <span class='autoCompCat'>" + item.Category + "</span> (Category)<br/>" + item.label + " <br/><span class='autoCompCpt'>" + item.value + "</span>" + "</a>").appendTo(ul); 
}; 

標記：

<p><label class='mesFieldLabel'> 
    ya typed:</label><input id='mesText2' type='text' class='mesText' /></p><div class="ui-widget cptarea"> 
<label class='mesFieldLabel' for="tags">Tags:</label> 
<input id="tags" /><span class='testCSS'>type 'ant' for example</span> 
</div> 
<div class='bugarea'> 
    <div> 
     <label class='mesFieldLabel'> 
      Code:</label><input id='bugid' maxlength="100" /> 
    </div> 
    <div> 
     <label class='mesFieldLabel'> 
      Category:</label><input id='bugcategory' maxlength="100" /> 
    </div> 
    <div> 
     <label class='mesFieldLabel'> 
      Bug:</label><input id='bug' maxlength="100" /> 
    </div><div> 
    <label class='mesFieldLabel'> 
     Bug Label:</label><input id='bugLabel' maxlength="100" /> 
    </div> 
</div> 

jQuery UI的最新版本，jQuery的1.6是首選項。

編輯： 我嘗試使用下面的「源」：

source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.each(sampleAnswers, function() { 
      var text = $(this).label; 
      if (this.value && (!request.term || matcher.test(text))) 
       return { 
        label: text.replace(
             new RegExp(
              "(?![^&;]+;)(?!<[^<>]*)(" + 
              $.ui.autocomplete.escapeRegex(request.term) + 
              ")(?![^<>]*>)(?![^&;]+;)", "gi" 
             ), "<strong>$1</strong>"), 
        value: text, 
        option: this 
       }; 
     })); 
    }, 

但這返回結果不包括我的條件我列出類型的（如「紅色臭蟲」返回項目00450，00450，00452）我不想顯示。 對於更新看到這個小提琴：http://jsfiddle.net/vapc2/1/

Answer 1

好，我解決了它返回所有結果而不是過濾

http://jsfiddle.net/vapc2/4/

這裏是我所做的代碼更改的問題 - 要注意的事情：

• 我將$（this）更改爲此。
• 我在結果陣列添加，只添加到時候通過測試（按照我原來的評論。）

• 你的正則表達式不工作，但我認爲這是這個問題的範圍之外。

  source: function(request, response) { 
  
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
  
      var resultset = []; 
  
      $.each(sampleAnswers, function() { 
  
      var t = this.label; 
  
      if (this.value && (!request.term || matcher.test(t))) 
      { 
       resultset.push({ 
  
       label: t.replace(
         new RegExp(
           "(?![^&;]+;)(?!<[^<>]*)(" + 
           $.ui.autocomplete.escapeRegex(request.term) + 
           ")(?![^<>]*>)(?![^&;]+;)", "gi" 
           ), "<strong>$1</strong>"), 
       value: t, 
       option: this 
      }); 
      } 
      return; 
  }); 
  
  response(resultset); 
  
  },