Bootstrap Typeahead

Introduction

In this tutorial, you will see how to create a Typeahead using Bootstrap.

Typeahead provides suggestions or data to users as they fill out forms.

Bootstrap allows you to create visually appealing Typeaheads, and it is easy to extend, requiring minimal changes to enhance its functionality.

What is Required

Typeahead is a product of Bootstrap 2.x, so this tutorial uses Bootstrap 2.0 for testing.

You must include 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

<div class="well">
    <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"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>

You can invoke typeahead via JavaScript and enhance its functionality with different options. The usage of typeahead via JavaScript is as follows:

$('#example').typeahead()

Example

<div class="well">
    <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"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></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. Here is a detailed explanation of each option:

source: Specifies the data source containing the values to be displayed for querying. The value type is array, and the default value is [].

items: Specifies the maximum number of items to be displayed for querying. The data type is number, and the default value is 8.

matcher: Determines whether the query matches an item. It takes a single argument, the item to test the query against. The current query is accessed via this.query. Returns a boolean value true if the query matches. The data type is function. By default, it is case-insensitive.

sorter: Used for automatically sorting results. It takes a single argument, the item with the scope of the typeahead instance. The current query is accessed via this.query. The data type is function. The default value is an exact match, but it can also be case-sensitive or case-insensitive.

highlighter: Used for automatically highlighting results. It takes a single argument, the item with the scope of the typeahead instance. The data type is function. By default, it highlights all default matches.

Methods

``` It initializes an input box with Typeahead.

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.