带有类别搜索的 Jquery 自动完成功能，仅限于用户选择的类别

Question

jquery Autocomplete demo page 的类别显示如下：

我希望用户在单独的按钮（下拉列表）中选择类别（产品或人员），然后 jquery 搜索仅返回用户选择的类别中的匹配项。

预期结果：

screenshot 2

我是 jquery 的新手，但根据我的研究，我认为这可以使用“函数”作为输入，正如这里的答案所说（即使问题不同）：

Jquery UI Autocomplete: search from multiple attributes of one array

但是我不知道下一步该做什么。

我当前的代码是来自官方文档的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Categories</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;    
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
      _create: function() {
        this._super();
        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
      },
      _renderMenu: function( ul, items ) {
        var that = this,
          currentCategory = "";
        $.each( items, function( index, item ) {
          var li;
          if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
            currentCategory = item.category;
          }
          li = that._renderItemData( ul, item );
          if ( item.category ) {
            li.attr( "aria-label", item.category + " : " + item.label );
          }
        });
      }
    });
    var data = [
      { label: "anders", category: "" },
      { label: "andreas", category: "" },
      { label: "antal", category: "" },
      { label: "annhhx10", category: "Products" },
      { label: "annk K12", category: "Products" },
      { label: "annttop C13", category: "Products" },
      { label: "anders andersson", category: "People" },
      { label: "andreas andersson", category: "People" },
      { label: "andreas johnson", category: "People" }
    ];

    $( "#search" ).catcomplete({
      delay: 0,
      source: data    
    });
  } );
  </script>
</head>
<body>

<label for="search">Search: </label>
<input id="search">

</body>
</html>

Answer 1

使用示例数据，需要做更多的工作来设置数据以使其更好地工作。如果您可以控制数据格式，则可以提前做好准备以更好地工作。

工作示例：https://jsfiddle.net/Twisty/uy5f2fta/

HTML

<label>Search:</label>
<select id="categories">
  <option value="none"></option>
</select>
<input id="search">

jQuery

var data = [{
  label: "anders",
  category: ""
}, {
  label: "andreas",
  category: ""
}, {
  label: "antal",
  category: ""
}, {
  label: "annhhx10",
  category: "Products"
}, {
  label: "annk K12",
  category: "Products"
}, {
  label: "annttop C13",
  category: "Products"
}, {
  label: "anders andersson",
  category: "People"
}, {
  label: "andreas andersson",
  category: "People"
}, {
  label: "andreas johnson",
  category: "People"
}];

$(function() {
  // Set Variables
  var cats = [],
    labels = {},
    sel = $("#categories"),
    search = $("#search");

  // Sift out specific Categories
  $.each(data, function(k, v) {
    if (v.category !== "") {
      cats.push(v.category);
      console.log("Found Cat: " + v.category);
    }
  });
  $.unique(cats);
  console.log("All Cats: ", cats);

  // Set Categories into Select element
  $.each(cats, function(k, v) {
    sel.append("<option value='" + v + "'>" + v + "</option>");
  });

  // Create Object of various data
  labels.none = [];
  $.each(cats, function(k, v) {
    labels[v] = [];
  });
  for (var i = 0; i < data.length; i++) {
    $.each(cats, function(k, v) {
      if (data[i].category == "") {
        labels.none.push(data[i].label);
      }
      if (data[i].category == v) {
        labels[v].push(data[i].label);
      }
    });
  }
  $.each(labels, function(k, v) {
    $.unique(labels[k]);
  });
  console.log("All Labels: ", labels);

  // Set Autocomplete with variable data based on category selection
  search.autocomplete({
    delay: 0,
    source: function(req, res) {
      var cat = sel.val();
      var data = labels[cat];
      var results = [];
      $.each(data, function(k, v) {
        if (v.indexOf(req.term) == 0) {
          results.push(v);
        }
      });
      res(results);
    }
  });
});

我首先筛选出我们知道会在数据中出现的类别。然后，它被用于使用特殊的“无”选项填充 Select 元素。您可以返回并调整 none 数据以包含所有标签。

接下来我们解析所有标签并将它们排序为一个对象，该对象具有以每个类别的名称作为索引的子数组。我们将使用该类别的数据填充每个数组。

最后，我们为source 使用了一个函数，这样我们就可以选择我们想要读取的数据集。 req.term 是字段中输入的数据，我们需要返回匹配数据的数组。 indexOf() 的使用在这里很有帮助。当术语位于字符串的开头时，这将返回 0。然后我们将结果数组传递给我们的res 回调函数。

因此，使用您的示例，如果类别为“none”并且我们输入“an”，我们会得到结果“anders”、“andreas”和“antal”。如果我们然后键入“and”，结果将按预期下降到“ansders”和“andreas”。