asp.net - Jquery UI autocomplete MultiSelect not working -

i came issues have search lot , tried every method solve issue has no response. want select multiple value in textbox using autocomplete add first item autocomplete doesn't load values after first value add show in figure. code follow

function split(val) {     return val.split(/,\s*/); }  function autocompletemrnpatient() {     $('#patientmrntxts').autocomplete({         source: function (request, reponse) {             $.ajax({                 url: "/doctorassessment/getmrnnumber",                 type: "get",                 datatype: "json",                 data: { term: request.term },                 success: function (data) {                     reponse($.map(data, function (item) {                        return { label: item.label, value: item.value };                     }));                 }             });         },         focus: function () {             return false;         },         select: function (event, ui) {             var terms = split(this.value);             // remove current input             terms.pop();             // add selected item             terms.push(ui.item.value);             // add placeholder comma-and-space @ end             terms.push("");             this.value = terms.join(", ");             return false;         }     }); } 

i got chance @ bit. make following assumptions , observations:

• you want unique values, no duplicates - keep new values if unique
• your values not contain comma - complicate split function
• you might need keep track of values , them. push them array called "holder" - note not remove values if remove selection list - functions provide (a way them , remove them, etc.)
• you have determine if wish display value or label of items.
• i did not have proper test of label/value pairs values create one. assume ajax works - commented out test , used source of created object list.
• you have "response" misspelled in source "reponse" did not fix that.
• autocompletemrnpatient serves same document ready handler.

code: (including setup, functions utility on object list , code need.)

// testable solution (source) var availabletags = [   "applescript",   "applescript",   "apple-script",   "apple script",   "applescript",   "asp",   "basic",   "c",   "c++",   "clojure",   "cobol",   "coldfusion",   "erlang",   "fortran",   "groovy",   "haskell",   "java",   "javascript",   "lisp",   "perl",   "php",   "python",   "ruby",   "scala",   "scheme" ]; // create new array of label/value match question // http://stackoverflow.com/questions/36452275/jquery-ui-autocomplete-multiselect-not-working var newarr = []; (var = 0; < availabletags.length; a++) {   newarr.push({     label: availabletags[a],     value: availabletags[a] + "v" +   }); } 

the functional parts:

// namespaced functions use var myapp = myapp || {}; myapp.arrayobj = {   indexof: function(myarray, searchterm, property) {     (var = 0; < myarray.length; i++) {       if (myarray[i][property] === searchterm) return i;     }     return -1;   },   indexallof: function(myarray, searchterm, property) {     var ai = [];     (var = 0; < myarray.length; i++) {       if (myarray[i][property] === searchterm) ai.push(i);     }     return ai;   },   lookup: function(myarray, searchterm, property, firstonly) {     var found = [];     (var = 0; < myarray.length; i++) {       if (myarray[i][property] === searchterm) {         found.push(myarray[i]);         if (firstonly) break; //if first        }     }     return found;   },   lookupall: function(myarray, searchterm, property) {     return this.lookup(myarray, searchterm, property, false);   },   remove: function(myarray, searchterm, property, firstonly) {     (var = myarray.length - 1; >= 0; i--) {       if (myarray[i][property] === searchterm) {         myarray.splice(i, 1);         if (firstonly) break; //if first term has removed       }     }   } }; myapp.func = {   split: function(val) {     return val.split(/,\s*/);   },   extractlast: function(term) {     return this.split(term).pop();   } };  // test lookup //var ai = myapp.arrayobj.lookupall(newarr, "applescript", "label"); //console.dir(ai);  // test index of item //var myi = myapp.arrayobj.indexof(newarr, "applescript", "label"); //console.log(myi);  // test remove of item match (all of them) // var removefirstonly = false; //myapp.arrayobj.remove(newarr, "applescript", "label", removefirstonly); //console.dir(newarr);   // put result objects in array var holder = [];  function autocompletemrnpatient() {   $('#patientmrntxts').autocomplete({     source: function(request, response) {       // delegate autocomplete, extract last term       response($.ui.autocomplete.filter(         newarr, myapp.func.extractlast(request.term)));     },     /* commented out , use source above     source: function(request, reponse) {        $.ajax({          url: "/doctorassessment/getmrnnumber",          type: "get",          datatype: "json",          data: {            term: request.term          },          success: function(data) {            reponse($.map(data, function(item) {              return {                label: item.label,                value: item.value              };            }));          }        });      },      */     focus: function() {       return false;     },     select: function(event, ui) {       // put in "holder" array if not in there       var exists = myapp.arrayobj.indexof(holder, ui.item.value, "key");       if (exists === -1) {         var entry = {           key: ui.item.value,           term: myapp.func.extractlast(this.value),           item: ui.item         };         holder.push(entry);       }       console.dir(holder);       var terms = myapp.func.split(this.value); // contains entry ex:"asp, b"       // remove current input       terms.pop();       // check if duplicate , if not push in       if (exists === -1) {         //the selected item         terms.push(ui.item.value);       }       // add placeholder comma-and-space @ end       terms.push("");       this.value = terms.join(", ");       return false;     }   }).data("uiautocomplete")._renderitem = function(ul, item) {     return $("<li></li>")       .data("item.autocomplete", item.label)       .attr("data-value", item.value)       .append("<a>" + item.label + "</a>")       .appendto(ul);   }; } autocompletemrnpatient(); 

here sample of above working: https://jsfiddle.net/xvu9syuf/1/