/    /  Bootstrap Typeahead

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:

 

Bootstrap4 Typeahead

 

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:

 

Bootstrap4 Typeahead