how to select multiple options from a search input with Jquery typeahead.js plugin

Question

I am using jQuery Typeahead plugin. I have a search input and dropdown list containing different values as you see below

for example if I select the shipment report, I will see just the shipment data as you see below

I want to use the multiselect options instead of selecting just one value. I am following the demo example Hockey v2 . I have enable the multiselect in my script but it's still selecting just one value.

Any suggestions please what am I missing in my code ? Thank you.

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

If you browse link as you mentioned "https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.7.0/jquery.typeahead.js". There are no such type of attribute "multiselect".

It means that, you are using old version of type ahead script.

As per latest script "https://cdnjs.com/libraries/jquery-typeahead". Please see below are the example.

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>