Question

我需要弄清楚如何使用twitter typeahead.js从json数组中选择select控件中的选项。 [这是一个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>

所以我有两个问题：

typeahead不起作用，因为json是一个数组数组，我该如何设置它以便typeahead使用＆＃39;标签＆＃39;搜索和id匹配选择框中的选项值？
一旦用户做出选择，如何让typeahead在选择框中自动选择匹配选项？

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

Answer 1

Ididn解决了这个问题，但使用了http://ivaynberg.github.io/select2/index.html#documentation

获得了一个很好的解决方法

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

1 个答案: