如何使用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格式的数组镆铘资源：

[ 
    { 
     "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> 

所以我有2个问题：

1. 的预输入不起作用，因为JSON是一个数组的数组，我怎么可以设置此向上，以便在预输入使用搜索的“标签”和ID在选择匹配选项值框？

2. 一旦用户做出选择，我怎样才能让键入自动选择选择框中的匹配选项？

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

Answer 1

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