A lightweight and flexible autocomplete plugin that will work with any backend, including Backbone and Ember.
The omniselect function accepts an options object.
source
- Array of data or a callbacknumResults
- Integer, maximum number of results to be displayed.allowAdd
- Boolean, enables a separate result for selecting the currently selected text. When the result is selected, theomniselect:add
event is fired.resultsClass
- String containing one or more classes to be applied to the results list element, delimited by a space (E.g. "class-one class-two").activeClass
- Sring containing one or more classes to be applied to the active result element, delimited by a space.filter
- Takes a callback with two parametersitem
andquery
. Should return a truthy value if the item matches the query.itemId
- Takes a callback with a single parameteritem
. Should return a unique identifier for that value in the array.itemLabel
- Takes a callback wtih a single parameteritem
. Should return the label that is displayed in the list of results.itemValue
- Takes a callback with a single parameteritem
. Should return the value that gets set on the input field when the item is selected.renderItem
- Takes a callback with three parameterslabel
,id
, andindex
. Returns a string or element to be appended to the results list. In most cases you'll want this to be ali
element. If you're specifying this callback, you should probably also specifyitemId
and/oritemValue
.
You can also bind to the following events:
omniselect:select
- Takes a callback with two parametersevent
andid
. If you want the input field to be cleared when an item is selected, do so here. If you return false, the item value will not be set on the input field.omniselect:add
- Takes a callback with two parametersevent
andvalue
. This gets fired when a value that is not in source has been selected.
$(document).ready(function() {
var $search = $('#search');
$search.omniselect({
source: ['Uno', 'Dos', 'Tres', 'Cuatro'],
numResults: 4
});
$search.on('omniselect:select', function(event, num) {
console.log('Selected: ' + num);
});
});
$(document).ready(function() {
var $input = $('#states');
$input.omniselect({
source: ["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"],
resultsClass: 'typeahead dropdown-menu',
activeClass: 'active',
renderItem: function(label, id, index) {
return '<li><a href="#">' + label + '</a></li>';
}
});
$input.on('omniselect:select', function(event, value) {
console.log('Selected: ' + value);
});
});
<div class="dropdown">
<input type="text" name="search" class="span3" id="states" style="margin: 0" placeholder="Search here..." />
</div>
var artists = new TownStage.ArtistsCollection();
artists.fetch();
$(document).ready(function() {
var $addArtist = $('#add_artist');
$addArtist.omniselect({
source: artists,
allowAdd: true,
itemId: function(artist) {
return artist.get('id');
},
itemLabel: function(artist) {
return artist.get('name');
},
filter: function(artist, query) {
return artist.get('name').match(new RegExp(query.split('').join('.*'), 'i'));
}
});
$addArtist.on('omniselect:select', function(event, id) {
artist = artists.get(id);
console.log('Added artist: ' + artist.get('name'));
});
$addArtist.on('omniselect:add', function(event, artist_name) {
console.log('Create new artist: ' + artist_name);
});
});
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request