title: How to get Bootstrap typeahead click result before the input change event
body: <p>I am trying to use bootstraps typeahead as a flexible select for users. So if the item is known they select it if not a dialogue opens up allowing them to enter a new item. </p>
  
  <p>I am doing this by watching for the change event on the input, if the inputs val is not in the source array (for the the typeahead) then the "add item" dialogue is shown to the user. The problem is if the user clicks one of the options a change event is sent before the typeahead has a chance to set the val. This is as the click will cause a blur on the text.</p>
  
  <p>I wanted to check the active element to get around this, so in the change event look at document.activeElement and see if it is one of the typeahead options, this did not work and returned the entire body element.</p>
  
  <p>Here is a trimmed down version of the code:</p>
  
  <p><strong>Html</strong>
      </p>
  
  <pre><code>&lt;div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Unknown Contact&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;The contact you have entered is unknown. Press cancel to enter a different contact or fill out the details below to create a new contact&lt;/p&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input id="modal_contact"  type="text" placeholder="dealership contact" value=""/&gt;
      &lt;label&gt;Email&lt;/label&gt;
      &lt;input id="modal_contact_email" type="text" placeholder="dealership contact" value=""/&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button id="save" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var contacts = ['pete','geoff'];
  
  $('.typeahead').typeahead({source:contacts, updater : function(item){
      console.log('updater fired'); //fires after first change event
      return item;
  }});
  
  $('input').change(function(ev){
      console.log($(ev.target).val());
  
      if ($.inArray($(ev.target).val(), contacts) &lt; 0)
          $('#contactModal').modal();
  })
  </code></pre>
  
  <p>And a JSFiddle version <a href="http://jsfiddle.net/k39vM/" rel="nofollow">http://jsfiddle.net/k39vM/</a></p>
  
  <p>Does any one know how I can test if the user has clicked a typeahead to find out if that caused the change event?</p>