Bootstrap Typeahead
Introduction
In this tutorial, you will see how to use Bootstrap to create a Typeahead.
Typeahead provides hints or data to users as they fill out forms.
Bootstrap allows you to create great-looking Typeahead, and it is easy to extend; you can enhance its functionality without major changes.
What is Required
Typeahead is a feature of Bootstrap 2.x, so this tutorial uses Bootstrap 2.0 for testing.
You must reference two JavaScript files, jquery.js and bootstrap-typeahead.js, both located in docs/assets/js/.
The following example demonstrates how to create a Typeahead using only markup, without writing JavaScript.
Example
Example
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
You can call Typeahead via JavaScript and enhance its functionality by using different options. The usage of calling Typeahead via JavaScript is as follows:
$('#example').typeahead()Here, 'example' is the id of the input field to which you want to apply typeahead.
Example
Example
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
Options
You can use various Typeahead options. Below is a detailed explanation of each option:
source: Specifies the data source containing the values to display when querying. The data type is array, and the default value is [ ].
items: Specifies the maximum number of entries to display when querying. The data type is number, and the default value is 8.
matcher: Determines whether a query matches an entry. It takes a single parameter, which is the entry to test against the query. The current query is accessed via this.query. Returns a boolean value true indicating that the query matches. The data type is function. By default, it is case-insensitive.
sorter: Used to automatically classify results. It takes a single parameter, an entry scoped to the typeahead instance. The current query is accessed via this.query. The data type is function. The default is exact match, and other values can be case-sensitive or case-insensitive.
highlighter: Used to automatically highlight results. It takes a single parameter, an entry scoped to the typeahead instance. The data type is function. By default, it highlights all default matches.
Methods
.typeahead(options)
It initializes an input field with Typeahead.
Click here to download all HTML, CSS, JS, and image files used in this tutorial.
Other Extensions