title: Need to understand how Bootstrap typeahead js works
body: <p>I am looking for a good jQuery auto suggest list plugin. I searched Google and found many but Bootstrap typeahead plugin look pretty good. I go through the use of Bootstrap typeahead but stuck for one area to understand properly.</p>
  
  <p>I read about Bootstrap typeahead use from this url <strong><a href="http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/" rel="nofollow noreferrer">http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/</a></strong></p>
  
  <p><strong><a href="http://deanhume.com/Home/BlogPost/twitter-bootstrap-typeahead-and-asp-net-mvc---key-value-pairs/88" rel="nofollow noreferrer">http://deanhume.com/Home/BlogPost/twitter-bootstrap-typeahead-and-asp-net-mvc---key-value-pairs/88</a></strong></p>
  
  <p>here I am pasting the code which is not very clear to me:</p>
  
  <pre><code>("#Search").typeahead({
  source: function (query, process) {
  var countries = [];
  map = {};
  
  // This is going to make an HTTP post request to the controller
  return $.post('/Client/CountryLookup', { query: query }, function (data) {
  
  // Loop through and push to the array
  $.each(data, function (i, country) {
  map[country.Name] = country;
  countries.push(country.Name);
  });
  
  // Process the details
  process(countries);
  });
  },
  updater: function (item) {
  var selectedShortCode = map[item].ShortCode;
  
  // Set the text to our selected id
  $("#details").text("Selected : " + selectedShortCode);
  return item;
  }
  </code></pre>
  
  <ol>
  <li>I like to know when source function will be called &amp; when it is function then some one need to call it...so who call this source function ?</li>
  <li><code>var countries = []; map = {};</code> I could understand countries is array but what is <code>map = {}</code>? why <code>map = {}</code> is required? If I omit this <code>map = {}</code> then what will happen?</li>
  <li>why we need to write this line?  <code>map[country.Name] = country;</code></li>
  <li><p>what updater is doing and when it will called?</p>
  
  <p>updater: function (item) {
  var selectedShortCode = map[item].ShortCode;</p>
  
  <p>// Set the text to our selected id
  $("#details").text("Selected : " + selectedShortCode);
  return item;
  }</p></li>
  <li><p><img src="https://i.stack.imgur.com/V5Xlj.png" alt="enter image description here">
  the auto suggest list is showing in the picture. the div for this list will be generated by this plugin automatically or do we need to put any div in the page?</p></li>
  <li><p><code>&lt;input type="text" id="Search" data-provide="typeahead" placeholder="Client Name" autocomplete="off" /&gt;</code>
  Is it mandatory data-provide="typeahead"? If I miss this attribute then plugin will work or not? Just see this url <strong><a href="http://www.arungudelli.com/asp-net-mvc/jquery-autocomplete-using-asp-net-mvc/" rel="nofollow noreferrer">http://www.arungudelli.com/asp-net-mvc/jquery-autocomplete-using-asp-net-mvc/</a></strong> from the above url I see the person did not use <code>data-provide="typeahead"</code> attribute.</p></li>
  <li><p>I have seen some people use this <code>remote: 'Home/GetData?q=%QUERY',</code> and few did not use it.</p></li>
  </ol>
  
  <p>looking for explanation for my all above points. please answer point wise.</p>
  
  <h2>UPDATE</h2>
  
  <p>8) i could understand source is an option which initialize dropdown. Effectively it is a function that you define and give to typeahead, so that it can then fetch the data to populate your dropdown list.</p>
  
  <p>i like to know when <code>source</code> function will be invoked? <code>source</code> function will be invoked by typeahead when user type anything in the textbox ? am i right ?</p>
  
  <p>9) i understand <code>map = {}</code> is JavaScript object but i do not understand why the person use this object in sample code. when any person is using code like this <code>map[country.Name] = country;</code> it means it is required for using typeahead.</p>
  
  <p><code>map[country.Name] = country;</code> what is the meaning of this code ? what kind of data the map object will have?</p>
  
  <p>10) you said :- typeahead had different options for getting sources from different locations.. i.e. local:, remote:, prefetch: ... I think now typeahead tries to do this using bloodhound adapters, but it is rather confusing me because I don't use it much at the moment and only used v0.9 which did this all differently before.</p>
  
  <p>can u plzz give a single example for each kind of sources from different locations. i need few example of usage for local:, remote:, prefetch etc.</p>
  
  <p>but if u see my example then u will notice how jquery $post() function is used to fetch data, so i like to know then when person should use these approach local:, remote:, prefetch etc for fetching data ?</p>
  
  <p>11) you asked for how json data would look like. so here is am pasting the data fetch from server in json format</p>
  
  <pre><code>{"ShortCode":"US","Name":"United States"},{"ShortCode":"CA","Name":"Canada"},
  {"ShortCode":"AG","Name":"Antigua and/or Barbuda"}]
  </code></pre>
  
  <p>please give me answer for my new question. thanks</p>