I'm trying to find a working example of the twitter bootstrap typeahead element that will make an ajax call to populate it's dropdown.
I have an existing working jquery autocomplete example which defines the ajax url to and how to process the reply
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
What do i need change to convert this to the typeahead example?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
I'm going to wait for the 'Add remote sources support for typeahead' issue to be resolved.
Edit: typeahead is no longer bundled in Bootstrap 3. Check out:
As of Bootstrap 2.1.0 up to 2.3.2, you can do this:
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
To consume JSON data like this:
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
Note that the JSON data must be of the right mime type (application/json) so jQuery recognizes it as JSON.