jquery - 值字段以外的搜索字段

Question

我有一个 jquery 自动完成小部件，它显示带有自定义数据的项目。

他们都有一个value, 和description。
当前，value当单击项目时将 插入到文本框中，并且value项目的 是搜索的内容

我想做的是让过滤器同时使用value和description过滤要显示的项目，但只保留value正在插入的项目。

我怎样才能做到这一点？

Answer 1

value如果你给自动完成器一个带有and label（而不是）属性的对象数组description，它会为你做过滤，但只在label（不是value）。

source如果您为option指定函数，则需要自己进行过滤。你会收到一个request参数（一个带有term属性的对象）和一个response参数（一个用结果回调的函数）。然后您自己返回相关结果，使用您喜欢的任何类型的搜索（例如，您可以同时搜索value和description在您的代码中搜索）。

例如，松散地：

$("some selector").autocomplete({
    // ...other options...
    source: function(request, response) {
        var matches = [];
        /* ...search for matches in your data using `request.term`,
           add them to `matches`...
        */
        response(matches);
    }
});

您返回的数组可以只是字符串，也可以是具有value和label属性的对象。将label显示，value选择时将使用 。

例如，这里有一个使用（短）机场列表，当您键入它时，会同时检查value（机场代码）和description（机场名称）：Live copy | 来源

jQuery(function($) {
  var data = [
    {value: "ORD", description: "Chicago O'Hare"},
    {value: "LHR", description: "London Heathrow"},
    {value: "SFO", description: "San Francisco International"}
  ];

  $("#theInput").autocomplete({
    source: function(request, response) {
      var capterm = request.term.toUpperCase();
      var matches = $.map(data, function(entry) {
        if (entry.value.toUpperCase().indexOf(capterm) !== -1 ||
            entry.description.toUpperCase().indexOf(capterm) !== -1) {
          return {
            value: entry.value,
            label: entry.value + " - " + entry.description
          };
        }
      });
      response(matches);
    }
  });
});

因此，键入“or”或“chic”将显示“ORD - Chicago O'Hare”，选择它会将“ORD”放在该字段中。键入“san”或“sfo”将显示“SFO - San Francisco International”，选择它会将“SFO”放在该字段中。