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

【问题标题】：How to use twitter typeahead.js to select an option in a select control from a json array如何使用 twitter typeahead.js 从 json 数组中选择选择控件中的选项
【发布时间】：2014-03-29 01:05:27
【问题描述】：

我需要弄清楚如何使用 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>

所以我有两个问题：

如何在用户做出选择后自动选择选择框中的匹配选项？

如果用户浏览器的 javascript 出现问题，我只会这样做作为后备，他们仍然可以使用下拉菜单。 - 如果有更好的 [更清洁] 方式来做到这一点，请提出建议。

【问题讨论】：

标签： jquery json twitter-bootstrap-3 typeahead.js

【解决方案1】：

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

【讨论】：