title: Bootstrap typeahead function force selection
body: <p>I know this question is asked so many times but the same is not working on my side. I want to force user to select result in typeahead, if he do not select on blur empty input box.</p>
  
  <p>I used type like on blur, typeahead:selected. On blur is working but I am not getting selected data and typeahead:selected is not working at all</p>
  
  <p>Please see this link for earlier answer <a href="https://stackoverflow.com/questions/14827576/twitter-bootstrap-typeahead-force-selection">link1</a>, <a href="https://github.com/twitter/typeahead.js/issues/163" rel="nofollow noreferrer">link2</a> and <a href="https://stackoverflow.com/questions/19128501/twitters-typeahead-example-dynamic-query">link3</a></p>
  
  <p>Below is my code with onblur</p>
  
  <pre><code>var newData = [];
  $('.search').each(function() {
    var idName = this.id;
    var $this = $(this);
     $this.typeahead({
     source:function(query,process){
      if( typeof searching != "undefined") {
       clearTimeout(searching);
       process([]);
   }
     searching = setTimeout(function() {
        return $.getJSON(
       "batchEnable.jsp?autosearch="+idName,
        { q:query },
         function(data){
         $.each(data, function(){
         newData.push(this.name);
    });
   // only search if stop typing for 300ms aka fast typers
     return process(newData);
        });
     }, 300); // 300 ms
   },
  }).blur(function(){
    if(newData[$(this).val()] == null) { 
    // I am always getting this null (newData[$(this).val()]), 
    //if even if I select typeahead result data
    $('#'+idName+'').val('');
     newData = [];
    }
   });
  });
  </code></pre>
  
  <p>Code with on selected with is not getting called on selection of typeahead data</p>
  
  <pre><code>.on('typeahead:selected', function (obj, datum) {
      console.log(datum);  // datum will contain the value that was autocompleted
   });
  </code></pre>