如何为 Twitter 预先输入覆盖 onSuggestionMouseEnter答案

【问题标题】：How to override onSuggestionMouseEnter for Twitter typeahead如何为 Twitter 预先输入覆盖 onSuggestionMouseEnter
【发布时间】：2015-03-04 18:24:21
【问题描述】：

我正在使用 Twitter Typeahead 并且在悬停建议时遇到一些问题，这会触发悬停的建议弹出到我的输入字段中。如果用户然后按下输入，将选择实际悬停的值，而不是用户写的内容。我希望仅当用户单击实际建议时才选择它。好像是

_onSuggestionMouseEnter()

当鼠标悬停在建议上时触发的函数。我的问题是是否可以在我自己的代码中覆盖这个函数？或者用其他方式解决这个问题？

这是我的预输入代码：

var suggestions = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        url: 'url/to/suggestions',
        filter: function(list) {
            return $.map(list.suggestions, function(word) {
                return {s: word.title};
            });
        }
    }
});

suggestions.initialize();
$('.typeahead').typeahead({highlight: true}, {
    source: suggestions.ttAdapter(),
    name: 'suggestions',
    displayKey: 's',
    hint: false
})

【问题讨论】：

标签： javascript jquery twitter typeahead

【解决方案1】：

为了将来参考，我通过在输入按键上添加一个检查来解决它，如下所示：

$("#search-input").keydown(function (e) {
  if (e.keyCode == 13 && hoverSuggestion) {
    $('.typeahead').typeahead('val', $('.twitter-typeahead pre').text());
    $('#search-input').text($('.twitter-typeahead pre').text())
    $('#search-form').submit();
  }
});

hoveSuggestion 变量用于检查箭头是否已被使用，如果是，则不通过清理建议。改成这样：

hoverSuggestion = true;
$('.typeahead').typeahead({highlight: true}, {
    source: suggestions.ttAdapter(),
    name: 'suggestions',
    displayKey: 's',
    hint: true
}).on('typeahead:cursorchanged', function(event) {
    hoverSuggestion = false;
});

不是最优雅的解决方案，但它现在可以工作。欢迎反馈！

【讨论】：