Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
typeahead.js a flexible JavaScript library that provides a strong foundation for building robust typeaheads. typeahead.js is a fast and fully-featured autocomplete library.
For more info please visit the plugin's Demo Page or Github Repo.

Typeahead Examples


						<div class="card card-custom">
							<div class="card-header">
								<h3 class="card-title">
									Typeahead Examples
								</h3>
							</div>
							<!--begin::Form-->
							<form class="form">
								<div class="card-body">
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Basic Demo</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="typeahead">
												<input class="form-control" id="kt_typeahead_1" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="States of USA"/>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Bloodhound (Suggestion Engine)</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="typeahead">
												<input class="form-control" id="kt_typeahead_2" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="States of USA"/>
											</div>
											<div class="form-text text-muted">
												Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Prefetch</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="typeahead">
												<input class="form-control" id="kt_typeahead_3" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Countries"/>
											</div>
											<div class="form-text text-muted">Prefetched data is fetched and processed on initialization</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Custom Templates</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="typeahead">
												<input class="form-control" id="kt_typeahead_4" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Oscar winners"/>
											</div>
											<div class="form-text text-muted">Custom templates give you full control over how suggestions get rendered</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Multiple Datasets</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="typeahead">
												<input class="form-control" id="kt_typeahead_5" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Select an option"/>
											</div>
											<div class="form-text text-muted">Remote data is only used when the data provided by local and prefetch is insufficient</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<a href="" class="btn btn-light-primary font-weight-bold btn-sm" data-toggle="modal" data-target="#kt_typeahead_modal">Launch modal typeaheads</a>
										</div>
									</div>
								</div>
								<div class="card-footer">
									<div class="row">
										<div class="col-lg-9 ml-lg-auto">
											<button type="reset" class="btn btn-primary mr-2">Submit</button>
											<button type="reset" class="btn btn-secondary">Cancel</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>
						

						// Class definition
						var KTTypeahead = function() {
						    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
						        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
						        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
						        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
						        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
						        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
						        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
						        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
						        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
						    ];

						    // Private functions
						    var demo1 = function() {
						        var substringMatcher = function(strs) {
						            return function findMatches(q, cb) {
						                var matches, substringRegex;

						                // an array that will be populated with substring matches
						                matches = [];

						                // regex used to determine if a string contains the substring `q`
						                substrRegex = new RegExp(q, 'i');

						                // iterate through the pool of strings and for any string that
						                // contains the substring `q`, add it to the `matches` array
						                $.each(strs, function(i, str) {
						                    if (substrRegex.test(str)) {
						                        matches.push(str);
						                    }
						                });

						                cb(matches);
						            };
						        };

						        $('#kt_typeahead_1, #kt_typeahead_1_modal').typeahead({
						            hint: true,
						            highlight: true,
						            minLength: 1
						        }, {
						            name: 'states',
						            source: substringMatcher(states)
						        });
						    }

						    var demo2 = function() {
						        // constructs the suggestion engine
						        var bloodhound = new Bloodhound({
						            datumTokenizer: Bloodhound.tokenizers.whitespace,
						            queryTokenizer: Bloodhound.tokenizers.whitespace,
						            // `states` is an array of state names defined in "The Basics"
						            local: states
						        });

						        $('#kt_typeahead_2, #kt_typeahead_2_modal').typeahead({
						            hint: true,
						            highlight: true,
						            minLength: 1
						        }, {
						            name: 'states',
						            source: bloodhound
						        });
						    }

						    var demo3 = function() {
						        var countries = new Bloodhound({
						            datumTokenizer: Bloodhound.tokenizers.whitespace,
						            queryTokenizer: Bloodhound.tokenizers.whitespace,
						            // url points to a json file that contains an array of country names, see
						            // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
						            prefetch: HOST_URL + '/api/?file=typeahead/countries.json'
						        });

						        // passing in `null` for the `options` arguments will result in the default
						        // options being used
						        $('#kt_typeahead_3, #kt_typeahead_3_modal').typeahead(null, {
						            name: 'countries',
						            source: countries
						        });
						    }

						    var demo4 = function() {
						        var bestPictures = new Bloodhound({
						            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
						            queryTokenizer: Bloodhound.tokenizers.whitespace,
						            prefetch: HOST_URL + '/api/?file=typeahead/movies.json'
						        });

						        $('#kt_typeahead_4').typeahead(null, {
						            name: 'best-pictures',
						            display: 'value',
						            source: bestPictures,
						            templates: {
						                empty: [
						                    '<div class="empty-message" style="padding: 10px 15px; text-align: center;">',
						                    'unable to find any Best Picture winners that match the current query',
						                    '</div>'
						                ].join('
'),
						                suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
						            }
						        });
						    }

						    var demo5 = function() {
						        var nbaTeams = new Bloodhound({
						            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
						            queryTokenizer: Bloodhound.tokenizers.whitespace,
						            prefetch: HOST_URL + '/api/?file=typeahead/nba.json'
						        });

						        var nhlTeams = new Bloodhound({
						            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
						            queryTokenizer: Bloodhound.tokenizers.whitespace,
						            prefetch: HOST_URL + '/api/?file=typeahead/nhl.json'
						        });

						        $('#kt_typeahead_5').typeahead({
						            highlight: true
						        }, {
						            name: 'nba-teams',
						            display: 'team',
						            source: nbaTeams,
						            templates: {
						                header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NBA Teams</h3>'
						            }
						        }, {
						            name: 'nhl-teams',
						            display: 'team',
						            source: nhlTeams,
						            templates: {
						                header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NHL Teams</h3>'
						            }
						        });
						    }

						    return {
						        // public functions
						        init: function() {
						            demo1();
						            demo2();
						            demo3();
						            demo4();
						            demo5();
						        }
						    };
						}();

						jQuery(document).ready(function() {
						    KTTypeahead.init();
						});
						
Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
Prefetched data is fetched and processed on initialization
Custom templates give you full control over how suggestions get rendered
Remote data is only used when the data provided by local and prefetch is insufficient

Validation State Examples


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Validation State Examples
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
											<div class="col-lg-4 col-md-9 col-sm-12 is-valid">
												<div class="typeahead">
													<input class="form-control is-valid" id="kt_typeahead_1_validate" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" type="text" placeholder="States of USA"/>
												</div>
												<div class="valid-feedback">Success! You've done it.</div>
												<span class="form-text text-muted">Example help text that remains unchanged.</span>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
											<div class="col-lg-4 col-md-9 col-sm-12 is-invalid">
												<div class="typeahead">
													<input class="form-control is-invalid" id="kt_typeahead_2_validate" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" type="text" placeholder="States of USA"/>
												</div>
												<div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
												<span class="form-text text-muted">Example help text that remains unchanged.</span>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-9 ml-lg-auto">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!--end::Form-->
							</div>
						

						// Class definition
						var KTTypeahead = function() {

						    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
						        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
						        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
						        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
						        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
						        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
						        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
						        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
						        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
						    ];

						    // Private functions
						    var demo1 = function() {
						        var substringMatcher = function(strs) {
						            return function findMatches(q, cb) {
						                var matches, substringRegex;

						                // an array that will be populated with substring matches
						                matches = [];

						                // regex used to determine if a string contains the substring `q`
						                substrRegex = new RegExp(q, 'i');

						                // iterate through the pool of strings and for any string that
						                // contains the substring `q`, add it to the `matches` array
						                $.each(strs, function(i, str) {
						                    if (substrRegex.test(str)) {
						                        matches.push(str);
						                    }
						                });

						                cb(matches);
						            };
						        };

						        $('#kt_typeahead_1_validate, #kt_typeahead_2_validate').typeahead({
						            hint: true,
						            highlight: true,
						            minLength: 1
						        }, {
						            name: 'states',
						            source: substringMatcher(states)
						        });
						    }

						    return {
						        // public functions
						        init: function() {
						            demo1();
						        }
						    };
						}();

						jQuery(document).ready(function() {
						    KTTypeahead.init();
						});
						
Success! You've done it.
Example help text that remains unchanged.
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9