title: Tokenizer plugin with autocomplete. Do I implement it properly?
body: <p>I am using the plugin found here - <a href="http://www.jqueryscript.net/form/Simple-jQuery-Tagging-Tokenizer-Input-with-Autocomplete-Tokens.html" rel="nofollow">http://www.jqueryscript.net/form/Simple-jQuery-Tagging-Tokenizer-Input-with-Autocomplete-Tokens.html</a></p>
  
  <p>github - <a href="https://github.com/firstandthird/tokens" rel="nofollow">https://github.com/firstandthird/tokens</a>
  dependecies - <a href="https://github.com/jgallen23/fidel" rel="nofollow">https://github.com/jgallen23/fidel</a></p>
  
  <p>Example uses:
  1) Working example (source array is loaded in memory) - <a href="http://jsfiddle.net/george_black/brmbyL8x/" rel="nofollow">http://jsfiddle.net/george_black/brmbyL8x/</a></p>
  
  <p>js code:</p>
  
  <pre><code>(function () {
  
      $('#tokens-example').tokens({
          source: ['Acura', 'Audi', 'BMW', 'Cadillac',
              'Chrysler', 'Dodge', 'Ferrari', 'Ford',
              'GMC', 'Honda', 'Hyundai', 'Infiniti',
              'Jeep', 'Kia', 'Lexus', 'Mini',
              'Nissan', 'Porsche', 'Subaru', 'Toyota',
              'Volkswagon', 'Volvo'],
          initValue: ['Acura', 'Nissan']
      });
  
  })();
  </code></pre>
  
  <p>html code:</p>
  
  <pre><code>&lt;h2&gt;Cars&lt;/h2&gt;
  &lt;input type="text" id="tokens-example" /&gt;
  </code></pre>
  
  <p>and it works properly.</p>
  
  <p>2) Faulty configuration example? (source array is generated from a server and loaded with ajax, well not actually, but you get the idea )- <a href="http://jsfiddle.net/george_black/xamxryn6/" rel="nofollow">http://jsfiddle.net/george_black/xamxryn6/</a></p>
  
  <pre><code>function testFunctionFeed(query){
      //dynamic results from server
      return ['Acura', 'Audi', 'BMW', 'Cadillac',
              'Chrysler', 'Dodge', 'Ferrari', 'Ford',
              'GMC', 'Honda', 'Hyundai', 'Infiniti',
              'Jeep', 'Kia', 'Lexus', 'Mini',
              'Nissan', 'Porsche', 'Subaru', 'Toyota',
              'Volkswagon', 'Volvo'];
  
  }
  
  (function () {
  
      $('#tokens-example').tokens({
  
          initValue: ['Acura', 'Nissan'],
          query: function(query,callback){
  
              //show query
              $("#loggerQuery p").text(query);
  
              //let's say the results are dynamic from server
              var sgstions = testFunctionFeed(query);
  
              console.log(sgstions);
               $("#loggerCallback p").text(sgstions);
  
               callback(sgstions);
  
          }
      });
  
  })();
  </code></pre>
  
  <p>but here I get the following error in console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'suggestions-list-element' of undefined
  </code></pre>
  
  <p>In tokens' github page you can read about the config I use in my second example.</p>
  
  <pre><code>"query": A function that is used to retreive suggestions. By default, it will use the internal sources, 
  however you can write your own function to query a database and return an array of suggestions. 
  This function receives two parameters
  
  query : The value entered by the user
  callback : The function that you should call, passing the suggestions as an array, once you finished getting your results
  </code></pre>
  
  <p>My question is, did I use the plugin properly in the second example? Has anyone else used the specific tokenizer plugin?</p>
  
  <p>Tokens has the exact behaviour I want from a tokenizer plugin (custom tags, autocomplete functionality, easy theming etc.) and I would really like to use it with an ajax call.</p>