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

问题描述 投票:3回答:4

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

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

jquery twitter typeahead.js twitter-typeahead
4个回答
5
投票

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

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

3
投票

虽然不一定是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对象时,我们只需完全取消绑定选择操作,以便在不关闭它的情况下执行我们想要的操作。

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

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


2
投票

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

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

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

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

1
投票

@Nate's答案相同,除了版本(0.11.1),该事件被称为typeahead:close而不是typeahead:closed,唯一的参数是事件:

$("#input").typeahead(
    // ...
)
.on('typeahead:close', function (evt) {
    console.log(evt);
    $(obj.currentTarget).val("");
});
© www.soinside.com 2019 - 2024. All rights reserved.