title: Using TypeAhead with jQuery and Bootstrap 2.1
body: <p>In version <a href="http://twitter.github.com/bootstrap/javascript.html#typeahead" rel="noreferrer">2.1 of Twitter Bootstrap</a>, the ability to pass a callback function in the Typeahead options <a href="https://github.com/twitter/bootstrap/pull/3250" rel="noreferrer">was added</a>. However, I've been having a difficult time getting this to work with a jQuery ajax call.</p>
  
  <p>Here's what I have so far.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" action=""&gt;
      &lt;fieldset&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="myTypeahead"&gt;User&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="myTypeahead" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript (set in the jQuery <code>$(document).ready</code> function)</strong></p>
  
  <pre><code>$("#myTypeahead").typeahead({
    source: function (query, process) {
      $.ajax({
        type: "POST",
        url: ServiceURL + "/FindUsers",
        data: "{ SearchText: '" + query + "' }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r1) {
          var users = [];
          if (r1.d.Records) {
            $(r1.d.Records).each(function (index, val) {
              users.push(val.User.Name);
            });
            console.log(users);
            process(users);
          }
        }
      });
    }
  });
  </code></pre>
  
  <p>When I type <code>test</code> (or <code>Test</code>) in the Typeahead input, no Typeahead results are displayed, but the data that is logged from the <code>users</code> variable looks like this:</p>
  
  <pre><code>["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"]
  </code></pre>
  
  <p>Why wouldn't this work?</p>
  
  <p>Also, for reference, here's the <a href="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-typeahead.js" rel="noreferrer">Typeahead JavaScript for Bootstrap</a>.</p>