Question

我有这个代码用于为输入添加自动完成功能。工作正常，但用户也应该能够在标题中搜索（a.k.a＆＃34; area ＆＃34;）。

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

因此，如果用户写了＆＃34; Something＆＃34;应出现标题和相关值。现在只搜索值（＆＃34; 标签＆＃34;）。

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

这会检查area的{{1}}和label。

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

1 个答案: