Typeahead Bloodhound点击自动补全选项后弹窗自动关闭问题咨询

解决方案 #

方法一：阻止点击事件冒泡（优先使用） #

给.js-follow元素的点击事件添加事件冒泡拦截，避免点击事件传递到typeahead的建议容器触发默认关闭逻辑，代码如下：

// 采用事件委托绑定，适配动态生成的建议项元素
$(document).on('click', '.js-follow', function(e) {
  e.stopPropagation();
  // 此处写入你原有的关注/取关业务逻辑
})

方法二：覆盖typeahead关闭逻辑（适配高版本typeahead） #

如果方法一不生效，说明你使用的typeahead版本绑定的是全局点击事件触发关闭，可通过前置关闭事件拦截实现：

// 定义关闭拦截标记
let disableTypeaheadClose = false;

// 点击关注按钮时标记为阻止关闭
$(document).on('mousedown', '.js-follow', function() {
  disableTypeaheadClose = true;
});

// 监听typeahead关闭前事件，判断是否拦截关闭
$('#tags').on('typeahead:beforeclose', function(e) {
  if (disableTypeaheadClose) {
    disableTypeaheadClose = false;
    e.preventDefault();
    return false;
  }
});

注意事项 #

• 动态生成的建议列表内的元素必须用事件委托绑定事件，直接绑定静态选择器会在建议列表刷新后失效。
• 两种方案都不会影响自定义业务逻辑的执行，也不会触发点击建议项自动填充输入框的默认行为。

内容的提问来源于stack exchange，提问作者EvilSpartans