jQuery自動完成UI搜索所有方向

Question

我正在使用jQuery自動完成來顯示大約2000條記錄列表的結果。因爲這個列表在我看來很長，我需要一個很好的過濾器來搜索所有這些記錄。

我已經修改了源代碼，以便我不僅可以在標籤字段中搜索，還可以在值字段中搜索。我現在想要的是，我可以搜索「S4 galaxy」，找到「Samsung Galaxy S4」。標準的jquery自動完成只能從左到右進行搜索，因此將會找到「galaxy s4」，而不是「s4 galaxy」。我也想看看「gal s4」並找到「Samsung Galaxy S4」。

var completeResults = [{ 
    value: "S4 iv", 
    label: "Samsung Galaxy S4", 
    image: "samsung_galaxy_s_iv_1.jpg" 
}, { 
    value: "stackoverflow", 
    label: "Nokia lumia 920", 
    image: "nokia_lumia_920_1.jpg" 
}]; 

completeResults現在是一個：

作爲一個額外的，它如果比賽被進行了大膽的>「三星銀河S4」

完整的代碼我現在用下面的看臺將是很好短名單！通常約2000條記錄。

function custom_source(request, response) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    response($.grep(completeResults, function (value) { 
     return matcher.test(value.value) || matcher.test(value.label); 
    })); 
} 

$("#s").autocomplete({ 
    source: custom_source, 
    minLength: 0 
}).data("ui-autocomplete")._renderItem = function (ul, item) { 
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>"; 

    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append(inner_html) 
     .appendTo(ul); 
}; 

Answer 1

好的，這裏有一些應該工作（減去文本的粗體，我會得到）。基本上，策略是：

1. 在用戶類型的每個術語之外創建正則表達式。我們可以通過拆分' '上的輸入來做到這一點。
2. 對於可能的選擇列表中的每一個選擇，看看有沒有什麼選擇，我們在步驟1中
3. 提取每一個正則表達式匹配僅返回滿足條件的在步驟2中

function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input: 
    var terms = $.map(request.term.split(' '), function (term) { 
     // Ignore just whitespace: 
     if ($.trim(term)) { 
      return new RegExp($.ui.autocomplete.escapeRegex(term), 'i'); 
     } 
    }); 

    response($.grep(completeResults, function (value) { 
     var found = true 
      , i 
      , regex; 

     // For every result, iterate over every term we extracted earlier and make sure it matches: 
     for (i = 0; i < terms.length && found; i++) { 
      regex = terms[i]; 
      found = found && (regex.test(value.value) || regex.test(value.label)); 
     } 

     return found; 
    })); 
} 

值

例子：http://jsfiddle.net/Aa5nK/73/

你的問題的另一部分是在以下問題回答：

jQueryUI: how can I custom-format the Autocomplete plug-in results?