title: How to use Jquery Tag-it and Algolia instant search autocomplete together
body: <p>I have the working code of Jquery Tag-it to autocomplete code for backend ajax request, Also I found the working code of Algolia search autocomplete, I just want to merge these codes and use algolia autocomplete in the jquery tagit library. I tried to merge them but start getting errors in the console.</p>
  <p>Thanks in advance</p>
  <p>//jquery tagit code</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using jQuery UI Tag-it&lt;/title&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css&quot; integrity=&quot;sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://aehlke.github.io/tag-it/css/jquery.tagit.css&quot;&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt; 
  
          &lt;h2&gt;Add&lt;/h2&gt;
          &lt;br&gt;
          &lt;form id=&quot;form&quot;&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;category&quot;&gt;Category  &lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;category&quot; id=&quot;category&quot; class=&quot;form-control&quot;&gt;  
              &lt;/div&gt;
        &lt;input type=&quot;submit&quot; value=&quot;submit&quot; class=&quot;btn btn-primary &quot;&gt; 
      &lt;/form&gt; 
  
    &lt;/div&gt;
  
  
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js&quot; integrity=&quot;sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://rawgit.com/aehlke/tag-it/master/js/tag-it.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
  
  $(document).ready(function () {
      
      $(&quot;#category&quot;).tagit({
        autocomplete: {
          source: function( request, response ) {
            console.log(request);
            $.ajax({
                  url: &quot;/autocomplete&quot;,
                  dataType: &quot;json&quot;,
                  data: {
                    'search':request.term
                  },
                  success: function (data) {
                      response($.map(data, function (category) {
                        return {
                            label: category.name,
                          
                        };
                    }));
                  }
              });
            }
        }
      });
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Algolia autocomplete code</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;link
      rel=&quot;stylesheet&quot;
      href=&quot;https://unpkg.com/instantsearch.css@7/themes/satellite-min.css&quot;
      /&gt;
      &lt;title&gt;InstantSearch | Autocomplete&lt;/title&gt;
   
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          
  &lt;div class=&quot;aa-input-container&quot; id=&quot;aa-input-container&quot;&gt;
      &lt;input type=&quot;search&quot; id=&quot;aa-search-input&quot; class=&quot;aa-input-search&quot; placeholder=&quot;Search with algolia...&quot; name=&quot;search&quot;
          autocomplete=&quot;off&quot; /&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
           (function() {
      let client = algoliasearch('Algolia-app-id', 'Algolia-search-key');
      let index = client.initIndex('categories');
      let enterPressed = false;
      //initialize autocomplete on search input (ID selector must match)
      autocomplete('#aa-search-input',
          { hint: false }, {
              source: autocomplete.sources.hits(index, { hitsPerPage: 10 }),
              //value to be displayed in input control after user's suggestion selection
              displayKey: 'name',
              //hash of templates used when rendering dataset
              templates: {
                  //'suggestion' templating function used to render a single suggestion
                  suggestion: function (suggestion) {
                      console.log(suggestion)
                      const markup = `
  
                          &lt;div class=&quot;algolia-details&quot;&gt;
                              &lt;span&gt;${suggestion.name}&lt;/span&gt;
                          &lt;/div&gt;
                      `;
  
                      return markup;
                  },
                  empty: function (result) {
                      return 'Sorry, we did not find any results for &quot;' + result.query + '&quot;';
                  }
              }
          }).on('autocomplete:selected', function (event, suggestion, dataset) {
              console.log(suggestion)
              // window.location.href = window.location.origin + '/shop/' + .slug;
              // enterPressed = true;
          }).on('keyup', function(event) {
              if (event.keyCode == 13 &amp;&amp; !enterPressed) {
                  window.location.href = window.location.origin + '/search-algolia?q=' + document.getElementById('aa-search-input').value;
              }
          });
  })();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>