jQuery Tokeninput add if not exists

Question

I am in the process of writing a script that builds upon user input,

I have some fields that its values need to be quired from the database,

and if no entry found I want to add a new value so the next user will find it through autocomplete.

I found this great looking & easy to implement jquery plugin called TokenInput, but it doesn't seem to

accept entries that are not available in my database query.

Here's the link for the plugin: http://loopj.com/jquery-tokeninput/demo.html

Is there a workaround for this ? Or do you suggest another plugin that already has this feature.

And I'm a little bit concerned about the security aspect of this sort of websites is there something special I need to take care of when doing this sort of implementation ?

Answer 1

This is now handled in the latest master of this plugin, using the allowFreeTagging option: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

The version number and docs haven't been updated in 2 years, so you'll have to use master.

Answer 2

When you enable tokenInput on a field,

$(selector).tokenInput(url, ...

that url is where tokenInput sends search queries. It points to a script which returns suggestions based on database entries matching the search query. What you want is to have that script add another suggestion to the list for that case when nothing in your database matches the search query. How to do this depends very much on the script.

Because you tagged your question with php, I'm guessing the url points to a php script which returns a JSON object full of suggestions. In that case, modify the php script so that it adds a new suggestion to the list:

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"

Answer 3

Here's my solution with local json

$("#input").tokenInput(yourjsondata,{
    preventDuplicates: false,
    onResult: function (item) {
        if($.isEmptyObject(item)){
              return [{id:'0',name: $("tester").text()}]
        }else{
              return item
        }

    },
});

Everything with id:0 is a new entry