title: Bootstrap - AutoComplete with TagsInput
body: <p>Hi I want to use the autocomplete feature along with tagsinput
  with Bootstrap
  I have an external json file too.
  I had added the external json also how it will look like..
  can any one help me out
  thanks
  Refrence Links <a href="http://timschlechter.github.io/bootstrap-tagsinput/examples/" rel="noreferrer">http://timschlechter.github.io/bootstrap-tagsinput/examples/</a></p>
  
  <p>Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet" /&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet" /&gt;
      &lt;link href="css/bootstrap-tagsinput.css" rel="stylesheet" /&gt;
      &lt;script src="Scripts/jquery-2.0.3.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap-tagsinput.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $('input').tagsinput({
              typeahead: {
                  source: function (typehead, query)
                  {
                      $.ajax({
                          url: "http://localhost:56558/keywords/test.html",
                          dataType: "json",
                          success: function(data) {
                              var return_list = [], i = data.length;
                              while (i--) {
                                  return_list[i] = { Name: data[i].value, value: data[i].id };
                              }
                              typeahead.process(return_list);
                          }
  
                      });
                  }
              }
          });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
  
      &lt;input type="text"  data-role="tagsinput" placeholder="Add tags" /&gt;
  
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  [ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]
  </code></pre>