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 ?

Chabot

This solution worked for me. I am sure this will help. [1]: https://mcmap.net/q/665844/-populate-jquery-tokeninput-on-ajax-event – Diecious

Answer 1

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)\"}"

Turfy

good solution. you could also only show the searched term if no results are found to make it neater – Dwight

Answer 2

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.

Frugivorous

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

Bobbibobbie

What/where is $("tester")? Do I need to create this separately? – Isla

Figured it out, <tester> is a tag tokeninput adds the DOM to hold the text you're currently typing into the input box. – Isla

Excellent solution +1 – Bellebelleek

Answer 4

To add to Shawn's answer (i.e. you need something server side to actually add it as a new item in the database), you might be able to make this change to allow the addition on the javascript side of things.

Eolic

Answer 5

I also changed the onBlur function to select the first item if they click off the search box - its more intuitive to users:

.blur(function () {
        $(this).val("");
        if ($(".token-input-selected-dropdown-item").length>0)
            add_token($(".token-input-selected-dropdown-item").data("tokeninput"));
        hide_dropdown();
    })

Dwight

Answer 6

 $(document).ready(function() {
            $("#expert").tokenInput("source.php", {
                theme: "facebook",
                noResultsText:'Skill Not Found - Enter to Add',
                queryParam:'q',
                onResult: function (item) {
                                            if($.isEmptyObject(item)){
                                                  return [{id:$("#token-input-expert").val(),name: $("#token-input-expert").val()+'*'}]
                                            }else{
                                                  return item
                                            }
                },
                preventDuplicates:true<?php if($expert_rank_json){?>,
                prePopulate: <?php echo $expert_rank_json ?>
                <?php } ?>
            });

Youngran

Answer 7

In the .php file, before the while condition, you can use this:

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"])); 

Laminar

Answer 8

I have added some functionalities to SteveR's answer, because I wanted the value to appear at the top of the dropdown even if there are results. Also onAdd if the item selected does not exist in the databese I want to add it:

 $("#my_input").tokenInput(my_results_route), {
    hintText: "Select labels",
    noResultsText: "No results",
    searchingText: "Searching...",
    preventDuplicates: true,
    onResult: function(item) {
        if($.isEmptyObject(item)){
            return [{id:'0', name: $("tester").text()}];   
        } else {
            //add the item at the top of the dropdown
            item.unshift({id:'0', name: $("tester").text()});
            return item; 
        }
    },
    onAdd: function(item) {
        //add the new label into the database
        if(!parseInt(item.id)) {
            //database insertion ajax call
            console.log('Add to database');
        }
    }
});

Conservator

What/where is $("tester")? Do I need to create this separately? – Isla

Figured it out, <tester> is a tag tokeninput adds the DOM to hold the text you're currently typing into the input box. – Isla