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 fo

Answer 1

 $(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 } ?>
            });

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.

Answer 3

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 4

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

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

Answer 6

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