Twitter Bootstrap typeaheads tutorial

Last update on November 14 2023 12:36:46 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will see how to create typeaheads using Twitter Bootstrap.

typeaheads are very useful to supply hints or data to users while filling forms. Twitter Bootstrap allows you to create excellent looking typeaheads with ease, moreover, it's easily extensible, so you may enhance it's functionality without much of an effort.

What is required

You have to include two JavaScript files jquery.js and bootstrap-typeahead.js, both present within docs/assets/js/.

The following example shows how you may create typeaheads without writing a single piece of JavaScript by yourself, the only markup does the job.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap typeahead example by w3resource</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>

View example live

You may call the typeahead via javascript and use it's different options to add functionality. Usage of call typeahead via JavaScript is:

$('#example').typeahead()

where 'example' is the id of the input field on which you are applying typeahead.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap typeahead with options example by w3resource</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-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>
</body>
</html>

View the example live.

Options

You may use various options with typeahead. Here is list with detail:

source: This is used to specify the data source containing values to be displayed when queried. The value of this is of array type and default value is [ ].

items: This is used to specify the maximum number of items to be displayed when queried. Data type is number and default value is 8.

matcher: Determines whether a query matches an item. It takes a single argument, i.e. the item against which to test the query. Current query is accessed with this.query. It returns a boolean true is the query is matched. Data type is a function. By default, it is case insensitive.

sorter: It is used to sort autocomplete results. It takes a single argument item having the scope of the typeahead instance. Current query is accessed with this.query. Data type is a function. The default value is an exact match, case sensitive and case insensitive.

highlighter: It is used to highlight autocomplete results. It takes a single argument item having the scope of the typeahead instance. Data type is function. By the default it highlights all default matches

Methods

.typeahead(options)

It initializes an input with a typeahead

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap carousel tutoriall
Next: Twitter Bootstrap Button JavaScript Plugin