正确使用 Typeahead？答案

【问题标题】：Proper use of Typeahead?正确使用 Typeahead？
【发布时间】：2015-01-22 20:17:05
【问题描述】：

我有一个远程 Typeahead 示例已启动并正在运行。但是，我想知道我是否将其用于预期目的。

基本上，即使它显示了适当的内容，我也需要提交所显示数据的唯一标识符。

远程 URL 将返回如下内容：

[{"id":"123456789", "email":"me@server.com", "value":"Me Lastname"}]

所以，显示Me Lastname，但实际提交123456789？

我的直觉告诉我我需要别的东西，也许是这样的： Select2?

【问题讨论】：

标签： typeahead.js bootstrap-typeahead

【解决方案1】：

也许你可以使用typeahead 的custom events 来做这样的事情：

.typeahead({
 ......
},
{
 .......
})
.on('typeahead:selected', onSelected);

请注意.on，它会触发一个像这样的自定义函数：

function onSelected($e, datum){
  //do your stuff depending on your implementation
  // you might want to fill an hidden field with the id
  // and submitting your form, or something else.
  // you can access your json in this way
  console.log(id); //="123456789
  console.log(email); //="me@server.com
  console.log(value); //="Me Lastname"

here你可以找到一些例子

【讨论】：

我最终使用了ivaynberg.github.io/select2，它具有我正在寻找的开箱即用的行为。它也适用于 Bootstrap3。感谢您的回复。

【解决方案2】：

我最终使用了以下 jQuery/Bootstrap3 库：Select2

【讨论】：