javascript - Twitter Bootstrap Typeahead 功能类似于 Google Chrome Omnibox

Question

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

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

有谁知道这个的解决方案？

Answer 1

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

现场演示（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;
        }
    });
});

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

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

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