erikjung
10/25/2012 - 2:43 AM

A CodePen by Erik Jung.

A CodePen by Erik Jung.

script.js
content_copyfile_download
$(function onReady() {
  
  function showIndicator() {
    $('.indicator').removeClass('hide');
  }
  
  function hideIndicator() {
    $('.indicator').addClass('hide');
  }
  
  function spoofRequest(query) {
    var def, states;
    
    def = $.Deferred();
    
    states = {AL: 'Alabama', AK: 'Alaska', AZ: 'Arizona', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DE: 'Delaware', DC: 'District of Columbia', FL: 'Florida', GA: 'Georgia', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PA: 'Pennsylvania', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming'};
    
    states = $.map(states, function (name) {
      return name;
    });
    
    setTimeout(function () {
      def.resolve(states);
    }, 1000);
    
    return def.promise();
  }
  
  $('input').typeahead({
    source: function search(query, process) {
      showIndicator();
      $.when(
        spoofRequest(query)
      ).then(
        process
      ).done(hideIndicator);
    }
  });
  
});
index.html
content_copyfile_download
<body class="container-fluid">
  <div class="row-fluid">
    <div class="span4 offset4">
      <div class="well">
        <h2>
          Bootstrap Typeahead<br>
          <small>Works asynchronously out of the box</small>
        </h2>
        <hr>
        <input class="span12" type="search">
        <small class="indicator hide">Searching...</small>
      </div>
    </div>
  </div>
</body>