Twitter Typeahead 自定义 select 逻辑

Question

我正在使用 Twitter Typeahead 生成建议。我的 Ajax 请求返回了一个复杂的数据类型，它在建议部分中显示得很好。当用户 select 的一个建议时，我想将项目的 ID 保存到隐藏字段，并将项目的名称 + 颜色保存到输入字段。正如我在文档中读到的那样，我必须重写 Typeahead 构造函数（或它在 JS 中调用的任何内容）中的显示方法，如下所示：

display: function(item) {
   $("#idhiddenfield").val(item.id);
   return item.name + " " + item.color;
}

这有两个问题：首先，它在建议出现时触发，而不是 select 显示它（显示对我来说似乎很奇怪，但文档声明它是正确的方法，在我看来它应该是 select 之类的），另外，如果我离开该字段并返回它，它会触发 Ajax 调用，显示 "No results found"（因为名称+颜色组合在服务器端是不可查询的）这肯定是不好的。

谁能帮我解决这两个问题？

Answer 1

我认为您误解了此处的文档。显示功能是确定建议中显示的字符串。

您可以使用 typeahead:select - input-元素上的事件对选择的建议做出反应。例如：

$("#typeAheadInput").on("typeahead:select", function(event){ //Your logic here});

为了更好的可读性，我建议将您的逻辑移动到命名函数而不是使用内联匿名函数。

$("#typeAheadInput").on("typeahead:select", yourNamedFunction);

Twitter Typeahead 自定义 select 逻辑

Twitter Typeahead custom select logic

javascript

typeahead

bootstrap-typeahead

twitter-typeahead