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

所以，如果用户写 "Something" 应该出现标题和相关值。现在只搜索值 ("label").

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

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

Answer 1

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

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to 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。

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

jQuery UI Autocomplete - Also search in title

jquery

jquery-ui

jquery-ui-autocomplete