Twitter Typeahead 自定义选择逻辑答案

【问题标题】：Twitter Typeahead custom select logicTwitter Typeahead 自定义选择逻辑
【发布时间】：2018-12-19 08:47:56
【问题描述】：

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

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

这有两个问题：首先，它在建议出现时被触发，而不是选择它（display 对我来说似乎很奇怪，但文档声明它是正确的方法，在我看来它应该是选择什么的），另外，如果我离开该字段并单击它，它会触发 Ajax 调用，显示“未找到结果”（因为名称+颜色组合在服务器端不可查询）这当然是不好。

有人可以帮我解决这两个问题吗？

【问题讨论】：

标签： javascript typeahead bootstrap-typeahead twitter-typeahead

【解决方案1】：

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

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

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

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

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

【讨论】：