Demo #1
$('#demo1').typeahead({
source: [
{ id: 1, name: 'Toronto' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
]
});
Demo #2
$('#demo2').typeahead({
source: [
{ ID: 1, Name: 'Toronto' },
{ ID: 2, Name: 'Montreal' },
{ ID: 3, Name: 'New York' },
{ ID: 4, Name: 'Buffalo' },
{ ID: 5, Name: 'Boston' },
{ ID: 6, Name: 'Columbus' },
{ ID: 7, Name: 'Dallas' },
{ ID: 8, Name: 'Vancouver' },
{ ID: 9, Name: 'Seattle' },
{ ID: 10, Name: 'Los Angeles' }
],
display: 'Name',
val: 'ID'
});
Demo #3
$('#demo3').typeahead({
source: [
{ id: 1, full_name: 'Toronto', first_two_letters: 'To' },
{ id: 2, full_name: 'Montreal', first_two_letters: 'Mo' },
{ id: 3, full_name: 'New York', first_two_letters: 'Ne' },
{ id: 4, full_name: 'Buffalo', first_two_letters: 'Bu' },
{ id: 5, full_name: 'Boston', first_two_letters: 'Bo' },
{ id: 6, full_name: 'Columbus', first_two_letters: 'Co' },
{ id: 7, full_name: 'Dallas', first_two_letters: 'Da' },
{ id: 8, full_name: 'Vancouver', first_two_letters: 'Va' },
{ id: 9, full_name: 'Seattle', first_two_letters: 'Se' },
{ id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo' }
],
displayField: 'full_name'
});
Demo #4
$('#demo4').typeahead({
ajax: '/cities/list'
});
Demo #5
$('#demo5').typeahead({
ajax: {
url: '/cities/list',
triggerLength: 1
}
});
Demo #6
$('#demo6').typeahead({
source: ['Toronto',
'Montreal',
'New York',
'Buffalo',
'Boston',
'Columbus',
'Dallas',
'Vancouver',
'Seattle',
'Los Angeles']
});
Demo #7
$('#demo7').typeahead({
source: ['Toronto',
'Toronto1',
'Toronto2',
'Toronto3',
'Toronto4',
'Toronto5',
'Toronto6',
'Toronto7',
'Toronto8',
'Toronto9',
'Toronto10',
'Montreal',
'New York',
'Buffalo',
'Boston',
'Columbus',
'Dallas',
'Vancouver',
'Seattle',
'Los Angeles'],
scrollBar:true
});
Demo #8
$('#demo8').typeahead({
autoSelect: false,
source: [
{ ID: 1, Name: 'Toronto' },
{ ID: 2, Name: 'Montreal' },
{ ID: 3, Name: 'New York' },
],
display: 'Name',
val: 'ID'
});