Twitter TypeAhead - MouseOver 建议将建议放在 input.tt-query 中

Question

在标准 Twitter TypeAhead 中，我有以下行为：

当用户开始输入时，会弹出建议，当他按 Enter 键时，他会被重定向到详细搜索页面，并将他输入的文本用作 url 参数 ?query=[text]。这是预期的，好的。

当用户在点击回车之前将鼠标放在建议上时，它会自动将此建议的标题放在 tt-query-input 中（不可见），当点击回车时，搜索查询是建议的标题而不是他输入的内容。 如何避免这种行为？

我添加了此代码以在单击 Enter 时重定向（其中 txtQuery 是我添加到类 'typeahead tt-query:

   $('#txtQuery').bind("enterKey", function (e) {
         var url = '/?query=' + $('#txtQuery').val();
         window.location.href = url;
     });
     $('#txtQuery').keyup(function (e) {
         if (e.keyCode == 13) {
             $(this).trigger("enterKey");
         }
     });

Answer 1

显然，当您将鼠标悬停在建议上时，会发生一些意想不到的事情。无论出于何种原因，悬停都会改变您在输入 DOM 中的值。您可以尝试阻止对事件执行的操作，如下所示：

$('.twitter-typeahead').on('mouseover', '.tt-suggestion', function(event){
  event.preventDefault();
  // verify input
  console.log($('#txtQuery').val());
});

编辑：

以同样的方式，您可以从“.tt-suggestion”项目中“取消绑定”keydown 事件，以防止enter 选择和提交。

HTH