Pages UI
Search…
Typehead
These are also know as auto-fill input boxes that fills up while you type. This is powered by Bootstrap type-head.
You can view there official documentation here
Step One
Include the required javascript files inside the <body> before core template script inclusions, if they are not there already.
1
<script src="assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"></script>
2
<script src="assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"></script>
Copied!
Step Two
Create a simple text box field and give it an ID so you can initialize in your JS file
1
<div class="form-group">
2
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
3
</div>
4
5
<form class="" role="form">
6
<div class="form-group form-group-default required typehead" id="sample-three">
7
<label>Countries</label>
8
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
9
</div>
10
</form>
Copied!
Step Three
Initialize your typehead with the ID you use
1
var countries = new Bloodhound({
2
datumTokenizer: Bloodhound.tokenizers.whitespace,
3
queryTokenizer: Bloodhound.tokenizers.whitespace,
4
prefetch: 'http://pages.revox.io/json/countries-list.json'
5
});
6
7
// passing in `null` for the `options` arguments will result in the default
8
// options being used
9
$('#mytyphead').typeahead(null, {
10
name: 'countries',
11
source: countries
12
});
Copied!
Last modified 3yr ago
Copy link