Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens

by george_black

HTML

<script src="http://www.ucarecdn.com/7504cc07-c7fd-4e7c-811c-7c3d78f7e80a/tokens.js"></script>
<script src="http://www.ucarecdn.com/c05cbb5f-0e69-4b4e-acb1-2a5426ce30e4/fidel.js"></script>
<link rel="stylesheet" href="http://www.ucarecdn.com/cf4ec614-92fd-49bb-896a-5aa54111ac94/tokens.css">
<h2>Cars</h2>
<input type="text" id="tokens-example" />
<br>
<h4>Logger:</h4>
<div style="border:1px solid;" id="loggerQuery"><p></p></div><br>
<div style="border:1px solid;" id="loggerCallback"><p></p></div>

JavaScript

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);
            
        }
    });
    
    $('#query').tokens({
    query: function (query, callback) {
      this.callback = callback;
      //Write here your code to fetch the data
      this.callback(autoCompleteData); //autoCompleteData contains the data
    }
    });

})();