CODEWITHSUNDEEP
phpjqueryjquery-tokeninput
Frank
Frank

Reputation: 534

jQuery Tokeninput add if not exists

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 ?

Upvotes: 19

Views: 11158

Answers (8)

Filipe Magalhães
Filipe Magalhães

Reputation: 1

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

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

Upvotes: 0

Khandad Niazi
Khandad Niazi

Reputation: 2396

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

Upvotes: 1

Marko Jurinčič
Marko Jurinčič

Reputation: 302

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

Upvotes: 0

meelash
meelash

Reputation: 340

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.

Upvotes: 17

SteveR
SteveR

Reputation: 101

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

Upvotes: 10

TimoSolo
TimoSolo

Reputation: 7325

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

Upvotes: 1

seekay
seekay

Reputation: 2513

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.

Upvotes: 2

Shawn
Shawn

Reputation: 11391

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

Upvotes: 13

Related Questions