如何使用Jquery typeahead.js插件从搜索输入中选择多个选项

Question

我正在使用jQuery Typeahead插件。我有一个包含不同值的搜索输入和下拉列表，如下所示

例如，如果我选择装运报告，我将只看到货物数据，如下所示

我想使用多选项而不是只选择一个值。我正在关注演示示例Hockey v2。我在我的脚本中启用了multiselect，但它仍然只选择一个值。

有什么建议，请问我的代码中缺少什么？谢谢。

var data = [{
            "name": "country",
            "id": "country",
            "typeReport": "shipment"
        }, {
            "name": "customer name",
            "id": "customer name",
            "typeReport": "shipment"
        }, {
            "name": "order number",
            "id": "order number",
            "typeReport": "serial"
        }, {
            "name": "line number",
            "id": "line number",
            "typeReport": "serial"
        }];

        typeof $.typeahead === 'function' && $.typeahead({
            input: ".js-typeahead-input",
            minLength: 0,
            maxItem: 8,
            maxItemPerGroup: 6,
            order: "asc",
            hint: true,
            searchOnFocus: true,
            group: {
                key: "typeReport",
                template: function (item) {
                    var typeReport = item.typeReport;
                    return typeReport; } },
            emptyTemplate: 'no result for {{query}}',
            groupOrder: ["shipment", "serial"],
            display: ["name"],
            correlativeTemplate: true,
            dropdownFilter: [{
                key: 'typeReport',
                template: '<strong>{{typeReport}}</strong> typeReport',
                all: 'All Reports'
            }],

            multiselect: {
            minLength: 1 },

          template: '<span>' +
            '<span class="name">{{name}}</span>' +
            '</span>',
            source: {
                groupName: {
                    data: data
                }
            },
            debug: true
        });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.7.0/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.7.0/jquery.typeahead.js"></script>

<form>
        <div class="typeahead__container">
            <div class="typeahead__field">
            <span class="typeahead__query">
                <input class="js-typeahead-input"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="on">
            </span>
            </div>
        </div>
</form>

Answer 1

如果你浏览链接，你提到“https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.7.0/jquery.typeahead.js”。没有这种类型的属性“multiselect”。

这意味着，您正在使用旧版本的类型提前脚本。

根据最新的剧本“https://cdnjs.com/libraries/jquery-typeahead”。请看下面的例子。

var data = [{
  "name": "country",
  "id": "country",
  "typeReport": "shipment"
}, {
  "name": "customer name",
  "id": "customer name",
  "typeReport": "shipment"
}, {
  "name": "order number",
  "id": "order number",
  "typeReport": "serial"
}, {
  "name": "line number",
  "id": "line number",
  "typeReport": "serial"
}];



typeof $.typeahead === 'function' && $.typeahead({
  input: ".js-typeahead-input",
  minLength: 0,
  maxItem: 8,
  maxItemPerGroup: 6,
  order: "asc",
  hint: true,
  searchOnFocus: true,

  group: {
    key: "typeReport",
    template: function(item) {
      var typeReport = item.typeReport;
      return typeReport;
    }
  },
  emptyTemplate: 'no result for {{query}}',
  groupOrder: ["shipment", "serial"],
  display: ["name"],
  correlativeTemplate: true,
  dropdownFilter: [{
    key: 'typeReport',
    template: '<strong>{{typeReport}}</strong> typeReport',
    all: 'All Reports'
  }],
  multiselect: {
    limit: 5,
    limitTemplate: 'You can\'t select more than 2 teams',
    matchOn: ["id"],
    data: function() {
      var deferred = $.Deferred();
      return deferred;
    },
    callback: {
      onClick: function(node, item, event) {
        event.preventDefault();
        console.log(item);
        alert(item.name + ' Clicked!');
      },
      onCancel: function(node, item, event) {
        console.log(item)
      }
    }
  },

  template: '<span>' +
    '<span class="name">{{name}}</span>' +
    '</span>',
  source: {
    groupName: {
      data: data
    }
  },
  debug: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>

<div class="typeahead__container">
  <div class="typeahead__field">
    <span class="typeahead__query">
                <input class="js-typeahead-input"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="on">
            </span>
  </div>
</div>