bootstrap Typehead.js

bootstrap Typehead.js

by Manish Jethva

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.0/bootstrap3-typeahead.js"></script>
<div class="container">

  <table border="1" cellpadding="5" cellspacing="0" style="width: 100%">
    <tr>
      <td>City 1:</td>
      <td><input id="city1"></input>
        <button id="myButton1">Show</button>
        <button id="clear1">Clear</button></td>
    </tr>

  </table>
</div>

CSS

.dropdown-menu {
  overflow-y: scroll;
  max-height: 250px !important;
}

JavaScript

$('body').data("btn1", true);
$('#myButton1').click(
  function() {
    var btn1 = $('body').data("btn1");
    if (btn1 === false) {
      alert('typeahead calls only once, clear to call again.');
      return;
    }
    $('#city1')
      .typeahead({
        source: ['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'
        ],
        autoSelect: false,
        items: 1000,
        minLength: 0

      });
    $('#city1').trigger('keyup');
    $('#city1').focus();
    $('body').data("btn1", false);
  });

$('#clear1').click(function() {
  $('#city1').val('');
  $('#city1').typeahead('destroy');
  $('body').data("btn1", true);

});