如何防止Twitter typeahead用所选值填充输入？

Posted 2021-05-05

我正在使用Twitter的typeahead插件来自动完成文本输入。我想更改行为，以便不是将所选选项的值放入文本输入（单击时），而是使用它执行其他操作。

有没有办法阻止typeahead使用所选选项的值自动填充输入？

答案

在我找到如何在选择选项时清除文本之前，我已经挣扎了一段时间：

$("#typeahead-input").on('typeahead:selected', function (event, datum, name) {
   $(this).typeahead("val", "");
   // Do something with the datum...
});

另一答案

虽然不一定是typeahead的意图，但如果你将它用于搜索页面，这个小小的花絮将非常有用我觉得我自己正在寻找这个答案。

从Typeahead结果列表中取消绑定选择事件：

$('.typeahead.users').typeahead({
            rateLimitWait: 250,
            limit: 100,
            valueKey: 'title'

}).on('typeahead:opened', function (obj, datum, name) {
    $('span.tt-dropdown-menu').unbind(); //UNBINDS TYPEAHEAD SELECTION EVENT
});

WTF你做过吗？ ： - 当打开typeahead对象时，我们只需完全取消绑定选择操作，以便在不关闭它的情况下执行我们想要的操作。

进一步说明：这有点破坏性，但是如果您正在使用搜索页面，其中结果项的正文链接到配置文件，并且右侧有一个关注按钮 - 那么自动填充是一个在屁股上超级痛苦的战斗。

希望这可以帮助！知道它有点晚了但也许其他人在将来寻找这个。

另一答案

我在阳光下尝试了其他所有东西，但在发布问题后几分钟偶然发现了一个解决方案。

如果其他人需要帮助，添加typeahead:closed事件处理程序允许您捕获输入的值，并在输入之前从输入中清除它（可能有一种方法可以防止它被输入到输入中，但我一直无法找到它。

所以这就是我正在做的事情：

      $("#input").typeahead({
            highlight: true
        },
        {
            name: 'my-dataset',
            displayKey: 'value',
            source: bloodHound.ttAdapter()
        }
    ).on('typeahead:closed', function (obj, datum, name) {
          $(obj.currentTarget).val("");
      });

另一答案

与@Nate's答案相同，除了版本（0.11.1），该事件被称为typeahead:close而不是typeahead:closed，唯一的参数是事件：

$("#input").typeahead(
    // ...
)
.on('typeahead:close', function (evt) {
    console.log(evt);
    $(obj.currentTarget).val("");
});