Twitter Bootstrap 2.1 Typeahead

Basic typeahead working with ajax

HTML

<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<input type="text" class="typeahead" />

CSS

body { padding: 40px; }

JavaScript

/* Demo data only for jsfiddle */
var ajaxData = {json: JSON.stringify(["Alabama","Alaska","Arizona","Arkansas","California"])};
var ajaxUrl = '/echo/json/';
/* END demo data */

$('.typeahead').on('click.typeaheadonce', function() {
    var $this = $(this)
    $this.off('click.typeaheadonce'); // Disable this listener so that it's called only once
    $.ajax(ajaxUrl, {
        type: 'post',
        data: ajaxData
    }).done(function(data) {
        // initialize the typeahead plugin
        $this.typeahead({
            source: data
        });
    });
});