Bootstrap Ajax Typeahead Plugin Demo


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