javascript - jquery select2: duplicate tag getting recreated -

i asked 1 question today , still unanswered (jquery select2: error in getting data php-mysql). however, trying fix , doing getting bit strange issue. not sure why happening this.

below javascript code.

<div class="form-group">    <label class="col-sm-4 control-label">product name</label>    <div class="col-sm-6">              <input type="hidden" id="tags" style="width: 300px"/>    </div> </div>  <script type="text/javascript"> var lastresults = [];  $("#tags").select2({     multiple: true,     placeholder: "please enter tags",     tokenseparators: [","],     initselection : function (element, callback) {         var data = [];         $(element.val().split(",")).each(function () {             data.push({id: this, text: this});         });         callback(data);     },     ajax: {         multiple: true,         url: "fetch.php",         datatype: "json",         type: "post",       data: function(term) {                         return {q: term};                     },                     results: function(data) {                         return {results: data};                     },       },     createsearchchoice: function (term) {         var text = term + (lastresults.some(function(r) { return r.text == term }) ? "" : " (new)");         return { id: term, text: text };     }, });  $('#tags').on("change", function(e){     if (e.added) {         if (/ \(new\)$/.test(e.added.text)) {            var response = confirm("do want add new tag "+e.added.id+"?");            if (response == true) {               alert("will send new tag server: " + e.added.id);               /*                $.ajax({                    type: "post",                    url: '/someurl&action=addtag',                    data: {id: e.added.id, action: add},                        error: function () {                       alert("error");                    }                 });                */            } else {                 console.log("removing tag");                 var selectedtags = $("#tags").select2("val");                 var index = selectedtags.indexof(e.added.id);                 selectedtags.splice(index,1);                 if (selectedtags.length == 0) {                     $("#tags").select2("val","");                 } else {                     $("#tags").select2("val",selectedtags);                 }            }         }     } }); </script> 

here php code (fetch.php)

<?php  // connect database  require('db.php');  // strip tags may not best method project apply layer of security fits needs tutorial  $search = strip_tags(trim($_get['q']));  //$search='te'; // prepared query  $query = $mysqli->prepare("select tid,tag tag tag :search limit 4");  // add wildcard search search variable $query->execute(array(':search'=>"%".$search."%"));  // quick fetchall on results $list = $query->fetchall(pdo::fetch_assoc);  // make sure have result if(count($list) > 0){    foreach ($list $key => $value) {     $data[] = array('id' => $value['tid'], 'text' => $value['tag']);                    }  } else {    $data[] = array('id' => '0', 'text' => 'no products found'); }  // return result in json echo json_encode($data);  ?> 

select2 version 3.5

above code able send/receive request database using fetch.php.

problem in database there 2 records test & temp when tag 1 of them create new tag.

it should work this. if database have value won't create new tag same name.

let me know if require more clarification.

update :

tags need id , text. issue you're facing text doesn't match id.

so, if write same text, select2 thinks new text new option because id don't match.

to solve issue, need set id same value text. change foreach of fetch.php following:

foreach ($list $key => $value) {     $data[] = array('id' => $value['tag'], 'text' => $value['tag']);                 }  

update: need update variable lastresults avoid duplication of tags same text. when bind select2, need change results property of ajax (based on this answer:

ajax: {     multiple: true,     url: "fetch.php",     datatype: "json",     type: "post",     data: function(term) {         return {q: term};     },     results: function(data) {         lastresults = data.results;         return {results: data};     },  }, 

note lastresults = data.results;. without this, lastresults variable empty and, when createsearchchoice function executed, return new tag.