Twitter Bootstrap Typeahead 功能类似于 Google Chrome Omnibox

Question

喜欢 Twitter Bootstrap 预输入功能，但我想做一些小改动 - 我想要最好的匹配（或者第一个匹配可能更简单），导致下拉菜单自动填充到输入框中。

我正在寻找的功能正是 Google Chrome Omnibox 的工作方式

有人知道解决办法吗？

Answer 1

玩了一下，我想出了那个代码。

Live demo (jsfiddle)

$('.omnitype').each(function() {
    var $omnitype = $(this);
    $omnitype.typeahead({
        source: mySource,
        items: 4,
        sorter: function(items) {
            // Bootstrap code
            /* ... */
            // Modified code (delay the return of sorted)
            var sorted = beginswith.concat(caseSensitive, caseInsensitive);

            // if there is a first element, we fill the input select what we added
            var first = sorted.length && sorted[0];
            if (first) {
                var origin = this.$element.val();
                this.$element.val(first);
                createSelection(this.$element.get(0), origin.length, first.length);
            }

            // back to the intended behavior
            return sorted;
        }
    });
});

我使用这个answer 来提供createSelection 功能（不确定是否真的需要）。

仍然需要进行一些调整，因为按键无法按预期工作。重新编码整个插件可能会更容易，通过一些检查自然会产生直观的行为。

或者您可以在插件之前捕获关键事件并做适当的事情。