jquery-tokeninput add non valid token by ;

Question

I experimented a little bit with the jquery token input plugin:

http://loopj.com/jquery-tokeninput/

I tried to modify the code so that the user can add values that are not in the list:

         $(document).ready(function() {
        $("#demo-input-local").tokenInput([
            {name: "Ruby"},
            {name: "Python"},
            { name: "JavaScript"},
            {name: "ActionScript"},
            { name: "Scheme"},
            { name: "Lisp"},
            { name: "C#"},
            {name: "Fortran"},
            {name: "Visual Basic"},
            {name: "C"},
            { name: "C++"},
            {name: "Java"}
        ]);
    });

To make this possible the user should seperate his input values by ; The values that are in the list should then appear in green and the inputs that are not in the list without color. I hope somebody can help me, with similar projects or links or code?

If you want to experiment:

http://jsfiddle.net/nfBLw/

Answer 1

You should be aware that this plugin has a number of options which are not shown in the documentation, it's relatively outdated. Check out the source code for these, it's well commented. Of interest to you would be allowFreeTagging and tokenDelimiter. Set them like this:

$("#demo-input-local").tokenInput([
            {name: "Ruby"},
            {name: "Python"},
            { name: "JavaScript"},
            {name: "ActionScript"},
            { name: "Scheme"},
            { name: "Lisp"},
            { name: "C#"},
            {name: "Fortran"},
            {name: "Visual Basic"},
            {name: "C"},
            { name: "C++"},
            {name: "Java"}
        ],
        allowFreeTagging: true,
        tokenDelimiter: ';');

With regards to colouring these tokens differently, that's a bigger job. Some pointers: make use of the onAdd callback, and be aware that the default tokenValue for 'FreeTags' is the same as their propertyToSearch (so item.id==item.name is a (non-failsafe) way of checking for these freetags.)