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。