jQuery UI 自动完成 - 同时在标题中搜索

Question

我有此代码用于向输入添加自动完成功能。工作正常，但用户也应该能够在标题中搜索（a.k.a “area”）。

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

因此，如果用户写“某事”，则应该出现标题和相关值。现在只在值中搜索（“label”）。

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

我需要做什么才能在这两个地方进行搜索？

Answer 1

有几种方法可以做到这一点。一种方法是为您的 Source 提供函数而不是数据。

功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：

• 一个request 对象，具有单个term 属性，它引用文本输入中当前的值。例如，如果用户在城市字段中输入 "new yo"，则自动完成项将等于 "new yo"。

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

这将检查term 中的area 和label。