jquery - 如何使用 twitter typeahead.js 从 json 数组中选择选择控件中的选项

Question

我需要弄清楚如何使用 twitter typeahead.js 从 json 数组中选择选择控件中的选项。 [这是一个 bootstrap3 网站]

我让 typeahead.js 几乎默认工作得很轻松:

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: {
    url: '[[!~36]]',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  }
});

countries.initialize();


$('#scrollable-typeahead .typeahead').typeahead(null, {
  name: 'countries',
  displayKey: 'name',
  source: countries.ttAdapter()
});

该 url 引用返回 json 格式数组的 modx 资源:

[
    {
        "id": 59,
        "label": "fname lname 561280"
    },

..... shortened .....

    {
        "id": 73,
        "label": "fname lname 333333"
    }
]

我的 html 看起来像:

<span id="scrollable-typeahead">
<input type="text" placeholder="Candidate search" class="typeahead form-control input-md" id="typeahead-clients">
</span>

<select id="client_id" name="client_id" class="form-control input-md combobox"  required="">
    <option value="59">fname lname 561280</option>
..... shortened .....
    <option value="73">fname lname 561280</option>
</select>

所以我有两个问题:

1. 预先输入不起作用，因为 json 是数组的数组，我该如何设置，以便预先输入使用“标签”进行搜索，并使用 id 来匹配选择框中的选项值？

2. 一旦用户做出选择，如何让输入自动选择选择框中的匹配选项？

我这样做只是为了当用户浏览器出现 JavaScript 问题时作为后备，他们仍然可以使用下拉菜单。 - 如果有更好的[更干净]的方法来做到这一点，请提出建议。

Answer 1

我没有解决这个问题，但使用了一个很好的解决方法:http://ivaynberg.github.io/select2/index.html#documentation