Question

我有一个文本输入字段，我使用Bootstrap Typeahead将US状态名称设置为其预先输入值。我还有一个函数foo，它将事件keyCode作为输入，并将文本字段输入值添加到列表中（它比这更复杂，但细节不应该很重要）。用户可以多次在该字段中输入值，每次用户输入一个值并按下＆＃34;输入＆＃34;，foo被调用，输入字段被清除。我注意到的是，如果我输入几个字母，请使用箭头键选择我想要的值，然后按＆＃34;输入＆＃34;，foo随项目调用它按预期添加到列表中。但是，当我键入几个字母，然后使用鼠标单击我想要的值时，正确的值将被放入文本字段，但不会调用foo。如果用户按下＆＃34;输入＆＃34;此时，foo将按预期调用，但我希望在用户点击预先输入列表中的值时立即调用foo。

到目前为止，我尝试了两种方法。

1）将click事件处理程序添加到输入中：

$('input').on('click', function() {
  // Call foo() passing it the ENTER event keyCode
})

这显然有问题，因为只要用户点击输入框就会触发它，但我只是想看看是否通过用户点击输入列表中的值来调用它。我发现它没有，所以似乎Bootstrap Typeahead将keyup事件传播到输入框，而不是click事件。这是正确的，还是在这里发生了其他事情？

2）使用Bootstrap Typeahead的updater方法触发事件：

$('input').typeahead({
  source: stateList,
  updater: function(item) {
    // trigger the 'keyup' event with keyCode 13 (the ENTER keyCode)
    return item;
  }
});

这不应该起作用，因为在事件触发后返回该项目。我期望在这里发生的是，无论用户输入到输入字段中的内容已经被添加到列表中（例如，如果我键入＆＃34; ca＆＃34;并点击＆＃34;加利福尼亚＆＃34;，＆＃34; ca＆＃34;会被添加而不是＆＃34;加利福尼亚＆＃34;），但似乎也没有发生，因为foo仍然没有被调用。

关于typeaheads的Bootstrap 2文档相当稀疏，不幸的是我无法升级到这个项目的Bootstrap 3。有没有办法完成我尝试使用Bootstrap 2 typeahead做什么？

TL; DR我希望在文本框中输入一个输入值并提交（＆＃34;输入＆＃34;按键），当我点击bootstrap typeahead列表中的值时。当＆＃34;进入＆＃34;它可以正常工作。用于选择列表项，但不是在使用鼠标时。如何通过鼠标单击选择Bootstrap Typeahead添加并提交值？

Bootstrap 2.3.2 typeahead trigger在单击某个项目时输入keyCode事件

0 个答案: