Twitter Bootstrap Typeahead可以像Google Chrome Omnibox一样运行

Question

喜欢Twitter Bootstrap预先输入功能,但是我想做一些小修补 - 我希望得到最好的匹配(或者第一次匹配可能更简单)导致下拉列表在输入框中自动填充.

我正在寻找的功能正是谷歌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功能(不确定是否真的需要).

仍然需要相当多的调整,因为键不能按预期工作.通过一些检查可以更容易地重新编码整个插件,这将自然地提供直观的行为.

或者您可以在插件之前捕获关键事件并执行适当的操作.