3

Love the Twitter Bootstrap typeahead functionality but I have a small tinkering I'd like to do - I want to have the best match (or first match is probably simpler) result in the drop-down be autofill in the input box.

The functionality I'm looking for is exactly the way the Google Chrome Omnibox works

screenshot

Anyone know of a solution for this?

Ryan Grush
  • 2,076
  • 3
  • 37
  • 64

1 Answers1

5

Playing a bit, I come up with that code.

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;
        }
    });
});

I used this answer to provide the createSelection function (not sure if really needed).

Still needs quite some tweaking, as the keys doesn't work as expected. It may be easier to recode the whole plugin with some checking that would give naturally the intuitive behavior.

Or you may be able to catch the key events before the plugin and do what is appropriate.

Community
  • 1
  • 1
Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • Dude, I'm sorry I must have missed this the other day. Fortunately I still have a use for this ;) This works great, thanks a lot! – Ryan Grush Aug 01 '12 at 23:44
  • Osm!! I just wanted to sort elements so just commented `this.$element.val(first);`. It worked like a charm... thank you! :D – Ravi Dhoriya ツ Nov 24 '14 at 14:03