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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何防止Twitter typeahead用所选值填充输入?相关的知识,希望对你有一定的参考价值。

我正在使用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("");
});

以上是关于如何防止Twitter typeahead用所选值填充输入?的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Typeahead.js 如何返回字符串中的所有匹配元素

Twitter Typeahead:如何在 DIV 中显示“未找到结果”消息?

如何使用 Eureka 框架根据所选值隐藏行/部分

使用 Twitter Typeahead.js 的多个远程源

Twitter 的 typeahead.js 建议没有样式(没有边框、透明背景等)

Twitter typeahead.js:可以使用 Angular JS 作为模板引擎吗?如果不是,我该如何替换 Hogan/Mustache js 的“”?