Bootstrap Typeahead
The bootstrap typeahead input fields are very popular in modern web forms. The main cause of using typeahead is to improve the user experience by supplying hints or a list of possibilities based on the text they’ve entered while filling a form or searching (something like the Google immediate search).
Creating Twitter Typeahead with Local Dataset:
How to create Twitter typeahead with local dataset.
Example:
<div class="bs-example"> <h2>Type your favorite car name</h2> <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"> </div>
Script:
<script> $(document).ready(function(){ // Defining the local dataset var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']; // Constructing the suggestion engine var cars = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, local: cars }); // Initializing the typeahead $('.typeahead').typeahead({ hint: true, highlight: true, /* Enable substring highlighting */ minLength: 1 /* Specify minimum characters required for showing result */ }, { name: 'cars', source: cars }); }); </script>
Style:
<style> .bs-example { font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 22px; /* Set input font size */ height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 22px; /* Set suggestion dropdown font size */ padding: 3px 20px; } .tt-suggestion:hover { cursor: pointer; background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } </style>
OUTPUT:
Creating Twitter Typeahead External Dataset:
External dataset through a URL pointing to a JSON file containing an array of datums.
Example:
<div class="bs-example"> <h2>Enter your country name</h2> <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"> </div>
Script:
<script> $(document).ready(function(){ // Sonstructs the suggestion engine var countries = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, // The url points to a json file that contains an array of country names prefetch: '/examples/data/countries.json' }); // Initializing the typeahead with remote dataset $('.typeahead').typeahead(null, { name: 'countries', source: countries, limit: 10 /* Specify maximum number of suggestions to be displayed */ }); }); </script>
Style:
<style> .bs-example { font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 22px; /* Set input font size */ height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 22px; /* Set suggestion dropdown font size */ padding: 3px 20px; } .tt-suggestion:hover { cursor: pointer; background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } </style>
OUTPUT: