title: Jquery Typeahead
body: <p>I'm trying to create an autocomplete search field from a json file with Jquery Typeahead, to have an autocomplete preview on search inputs similar to google search, based on this example: <a href="http://www.runningcoder.org/jquerytypeahead/demo/" rel="nofollow noreferrer">http://www.runningcoder.org/jquerytypeahead/demo/</a> (Beer v1).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;div class="typeahead__container"&gt;
          &lt;div class="typeahead__field"&gt;
          &lt;span class="typeahead__query"&gt;
              &lt;input class="js-typeahead-input"
                     name="q"
                     type="search"
                     autofocus
                     autocomplete="off"&gt;
          &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var data = {
      countries: ["Afghanistan", "Albania", "Algeria"],
      capitals: ["Abu Dhabi", "Abuja", "Accra"]
  };
  typeof $.typeahead === 'function' &amp;&amp; $.typeahead({
      input: ".js-typeahead-input",
      minLength: 1,
      order: "asc",
      group: true,
      maxItemPerGroup: 5,
      groupOrder: function () {
          var scope = this,
              sortGroup = [];
          for (var i in this.result) {
              sortGroup.push({
                  group: i,
                  length: this.result[i].length
              });
          }
          sortGroup.sort(
              scope.helper.sort(
                  ["length"],
                  true, // false = desc, the most results on top
                  function (a) {
                      return a.toString().toUpperCase()
                  }
              )
          );
          return $.map(sortGroup, function (val, i) {
              return val.group
          });
      },
      hint: true,
      dropdownFilter: "All",
      template: "{{display}}, &lt;small&gt;&lt;em&gt;{{group}}&lt;/em&gt;&lt;/small&gt;",
      emptyTemplate: "nothing for : {{query}}",
      source: {
          country: {
              data: data.countries
          },
          capital: {
              data: data.capitals
          }
      },
      debug: true
  });
  </code></pre>
  
  <p>I tried to replace actual source by </p>
  
  <pre><code>    source: {
          "coutries": {
              ajax: {
                  url: "coutries.json",
                  path: "data"
              }
          },
          "capitals": {
              ajax: {
                  url: "capitals.json",
                  path: "data"
              }
          },
  }
  </code></pre>
  
  <p>The problem is that I can't add the JSON files to load results from.</p>
  
  <p>Final result should look like this :
  <a href="https://i.stack.imgur.com/jqz5l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jqz5l.png" alt="enter image description here"></a></p>