JSFiddle - React, Tailwind, and code Playground
by Sherbrow
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<input class="omnitype" type="text" data-provide="typeahead">
CSS
body {
margin: 50px;
}
JavaScript
// Source http://stackoverflow.com/a/646662/1478467
function createSelection(field, start, end) {
if (field.createTextRange) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
} else if (field.setSelectionRange) {
field.setSelectionRange(start, end);
} else if (field.selectionStart) {
field.selectionStart = start;
field.selectionEnd = end;
}
field.focus();
}
var mySource = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
$('.omnitype').each(function() {
var $omnitype = $(this);
$omnitype.typeahead({
source: mySource,
items: 4,
sorter: function(items) {
// Bootstrap code
var beginswith = [],
caseSensitive = [],
caseInsensitive = [],
item;
while ((item = items.shift())) {
if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item);
else if (~item.indexOf(this.query)) caseSensitive.push(item);
else caseInsensitive.push(item);
}
// Modified code (delay the return of sorted)
var sorted = beginswith.concat(caseSensitive, caseInsensitive);
// if there is a first...