jQuery UI自動完成 - 同時在標題中搜索

Question

我有這個代碼用於添加自動完成到輸入。工作正常，但用戶也應該能夠在標題中進行搜索（又名「地區」）。

$(document).ready(function() { 
    "use strict"; 

    //Autocomplete 
    $(function() { 
     $.widget("custom.catcomplete", $.ui.autocomplete, { 
      _create: function() { 
       this._super(); 
       this.widget().menu("option", "items", "> :not(.ui-autocomplete-area)"); 
      }, 

      _renderMenu: function(ul,items) { 
       var that = this, 
        currentarea = ""; 

       $.each(items, function(index,item) { 
        var li; 
        if (item.area !== currentarea) { 
         ul.append("<li class='ui-autocomplete-area' aria-label='"+item.area+"'>" + item.area + "</li>"); 
         currentarea = item.area; 
        } 

        li = that._renderItemData(ul,item); 

        if (item.area) { 
         li.attr("aria-label", item.area + ":" + item.label); 
        } 
       }); 
      } 
     }); 

     var data = [ 
      //Title : Value 
      { area: "Something", label: "ST A" }, 
      { area: "Something", label: "ST B" }, 
      { area: "Other thing", label: "OT A" }, 
      { area: "Other thing", label: "OT B" }, 
      { area: "This thing", label: "TT A" } 
     ]; 

     $("#the_things").catcomplete({ 
      delay: 0, 
      source: data 
     }); 
    }); 
}); 

因此，如果用戶寫道「Something」應該出現標題和相關的值。現在只搜索數值（「標籤」）。

MCVE：https://jsfiddle.net/p91w9y1o/

我需要使它在這兩個地方搜到呢？

Answer 1

有幾種方法可以做到這一點。一種方法是爲您的數據源提供一個函數，而不是數據。

功能：第三變型中，回調，提供最大的靈活性和可用於任何數據源連接到自動填充。回調有兩個參數：

• 一個request對象，具有單term屬性，它指的是當前值的文字輸入。例如，如果用戶在城市字段中輸入"new yo"，則自動完成項將等於"new yo"。

• A response回調，它需要一個參數：要建議給用戶的數據。這些數據應根據所提供的術語進行過濾，並且可以採用上述任何一種簡單本地數據格式。在請求期間提供自定義源回調以處理錯誤時，這很重要。即使遇到錯誤，您也必須始終致電response回撥。這可確保小部件始終具有正確的狀態。

在本地過濾數據時，可以使用內置的$.ui.autocomplete.escapeRegex函數。它將採用單個字符串參數並轉義所有正則表達式字符，使結果安全傳遞至new RegExp()。

查看更多：http://api.jqueryui.com/autocomplete/#option-source

這可能是這樣的：

的JavaScript

$(function() { 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-area)"); 
    }, 

    _renderMenu: function(ul, items) { 
     var that = this, 
     currentarea = ""; 

     $.each(items, function(index, item) { 
     var li; 
     if (item.area !== currentarea) { 
      ul.append("<li class='ui-autocomplete-area' aria-label='" + item.area + "'>" + item.area + "</li>"); 
      currentarea = item.area; 
     } 

     li = that._renderItemData(ul, item); 

     if (item.area) { 
      li.attr("aria-label", item.area + ":" + item.label); 
     } 
     }); 
    } 
    }); 

    var data = [{ 
    area: "Something", 
    label: "ST A" 
    }, { 
    area: "Something", 
    label: "ST B" 
    }, { 
    area: "Other thing", 
    label: "OT A" 
    }, { 
    area: "Other thing", 
    label: "OT B" 
    }, { 
    area: "This thing", 
    label: "TT A" 
    }]; 

    $("#the_things").catcomplete({ 
    delay: 0, 
    source: function(req, resp) { 
     var results = []; 
     $.each(data, function(k, v) { 
     if (v.area.toLowerCase().search(req.term) !== -1) { 
      results.push(v); 
     } 
     resp(results); 
     }) 
    } 
    }); 
}); 

工作實例：https://jsfiddle.net/Twisty/ofnt86r9/

更新

新工作實例：https://jsfiddle.net/Twisty/ofnt86r9/2/

$("#the_things").catcomplete({ 
    delay: 0, 
    source: function(req, resp) { 
     var results = []; 
     $.each(data, function(k, v) { 
     if ((v.area.toLowerCase().search(req.term.toLowerCase()) !== -1) || (v.label.toLowerCase().search(req.term.toLowerCase()) !== -1)) { 
      results.push(v); 
     } 
     resp(results); 
     }) 
    } 
    }); 

這將同時檢查area和term的label。