如何让Bootstrap Typeahead.js仅在点击时设置输入框val()？

这个问题我之前在ASP.NET MVC项目里踩过坑！Bootstrap Typeahead默认的hover后blur自动选中逻辑确实有点恼人，咱们可以通过两种方式来修复，确保只有主动点击下拉项才会更新输入框的值：

方法一：拦截Blur事件，区分点击来源 #

核心思路是记录用户是否真的点击了下拉菜单，在输入框失去焦点时，只有点击下拉项才允许选中，否则清除高亮状态：

// 假设你的输入框ID是ProductName
var $typeaheadInput = $('#ProductName');

// 初始化Typeahead（替换成你实际的数据源配置，比如从MVC Action异步获取）
$typeaheadInput.typeahead({
    source: function(query, process) {
        $.get('/Products/Search', { term: query }, function(data) {
            process(data);
        });
    },
    minLength: 2
});

// 标记是否正在点击下拉菜单
var isClickingDropdown = false;

// 监听下拉菜单的mousedown事件（比click更早触发，避免blur先执行导致判断错误）
$typeaheadInput.data('typeahead').$menu.on('mousedown', function() {
    isClickingDropdown = true;
});

// 处理输入框的blur事件
$typeaheadInput.on('blur', function() {
    setTimeout(function() {
        if (!isClickingDropdown) {
            // 清除高亮的active项，避免blur时自动选中
            $typeaheadInput.data('typeahead').$menu.find('.active').removeClass('active');
            // 可选：如果需要保留输入框原内容，这里无需额外操作；若要重置为空可加 $(this).val('');
        }
        // 重置标记
        isClickingDropdown = false;
    }, 100); // 延迟执行，确保click事件先完成判断
});

方法二：覆盖Typeahead的选中逻辑 #

直接修改Typeahead的select回调，只允许click事件触发选中操作：

$('#ProductName').typeahead({
    source: ['Apple', 'Banana', 'Cherry'], // 替换成你的实际数据源
    select: function(event, item) {
        // 仅当事件类型为click时，才执行选中逻辑
        if (event.type !== 'click') {
            return false;
        }
        // 设置输入框值
        $(this).val(item.value);
        // 可选：触发change事件，确保ASP.NET MVC的模型绑定能捕获到更新后的值
        $(this).trigger('change');
        return false;
    }
});

这种方式更直接，通过拦截选中事件，过滤掉非点击触发的选中请求。

额外注意事项 #

• 如果你的Typeahead是动态生成的（比如在PartialView或异步加载的内容里），记得把事件绑定放在$(document).on()里，确保元素加载后能触发：

  $(document).on('mousedown', '#ProductName + .typeahead .dropdown-menu', function() {
      isClickingDropdown = true;
  });
  

• 测试时注意边缘场景：比如hover下拉项后直接按回车，若需要允许这种方式选中，可以在代码里额外判断event.keyCode === 13。

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