CODEWITHSUNDEEP
jqueryautocompletetokenize
GeorgeKaf
GeorgeKaf

Reputation: 613

Tokenizer plugin with autocomplete. Do I implement it properly?

I am using the plugin found here - http://www.jqueryscript.net/form/Simple-jQuery-Tagging-Tokenizer-Input-with-Autocomplete-Tokens.html

github - https://github.com/firstandthird/tokens dependecies - https://github.com/jgallen23/fidel

Example uses: 1) Working example (source array is loaded in memory) - http://jsfiddle.net/george_black/brmbyL8x/

js 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']
    });

})();

html code:

<h2>Cars</h2>
<input type="text" id="tokens-example" />

and it works properly.

2) Faulty configuration example? (source array is generated from a server and loaded with ajax, well not actually, but you get the idea )- http://jsfiddle.net/george_black/xamxryn6/

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);

        }
    });

})();

but here I get the following error in console:

Uncaught TypeError: Cannot read property 'suggestions-list-element' of undefined

In tokens' github page you can read about the config I use in my second example.

"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

My question is, did I use the plugin properly in the second example? Has anyone else used the specific tokenizer plugin?

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.

Upvotes: 0

Views: 1758

Answers (1)

GeorgeKaf
GeorgeKaf

Reputation: 613

I got an answer from one of the plugin's developers.

In my not working example, I was calling the callback function out of scope (keep in mind I had no samples to begin with). Below is the correct code.

working example - http://jsfiddle.net/george_black/vx8dnggh/

(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);

            callback.call(this, sgstions);

        }
    });
})();

Upvotes: 1

Related Questions