typeahead.js demo
jsonp
HTML
<script src="https://rawgithub.com/zeMirco/typeahead.js/master/dist/typeahead.min.js"></script>
<form id="my-form">
<input class="form-control" name="search" type="text" placeholder="type something ..." id="my-autoc">
<br>
</form>
CSS
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css');
@import url('https://rawgithub.com/ashleydw/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css');
body{
padding: 20px;
}
JavaScript
$('#my-autoc').typeahead({
name: 'search',
remote: {
url: 'http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY',
dataType: 'jsonp',
cache: false,
filter: function(parsedResponse){
return (parsedResponse.length > 1) ? parsedResponse[1] : [] ;
}
}
}).on('typeahead:selected', function(e){
e.target.form.submit();
});