Jquery UI otomatik tamamlama MultiSelect çalışmıyor

Question

Çok fazla aradığım sorunları gündeme getirdim ve sorunu çözmek için her yöntemi denedim ama yanıt vermedi. Otomatik tamamlamayı kullanarak metin kutusunda birden çok değer seçmek istiyorum ancak ilk öğe eklediğimde, ilk değer eklendikten sonra değer otomatik olarak yüklenmiyor.

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 the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 
} 

Answer 1

izleyin Bu biraz bakmak için bir şans var olduğu My kodudur. Ben aşağıdaki varsayımları ve gözlem yapmak:

• Yalnızca benzersiz değerleri istiyorum, hayır çiftleri - onlar
• Kişisel değerler virgül içermeyen benzersiz olup olmadığını bu yüzden sadece yeni değerler tutmak - karmaşık hale getireceği bölünmüş fonksiyonu
• Değerleri takip etmeniz ve onlarla bir şeyler yapmanız gerekebilir. Bu yüzden onları "tutucu" olarak adlandırılan bir diziye itiyorum - Seçimi listeden çıkarırsanız değerleri kaldırmayacağımı unutmayın - bunu sağladığım işlevlerle (bunları görüntülemenin ve kaldırmanın bir yolu)
• Öğelerinizin değerini veya etiketini görüntülemek isteyip istemediğinizi belirlemeniz gerekir.
• Değerlerinizden sizin için uygun bir etiket/değer çiftleri testim olmadı, bu yüzden bir tane oluşturdum. Ajax'in çalıştığını farz ediyorum - bu yüzden bunu test ettim ve oluşturduğum nesne listesinin bir kaynağını kullandım.
• source içinde "yanıt" olarak yanlış yazılmış "yanıt" var, ancak ben bunu düzeltmedim. Temel olarak bir hazır işleyici ile aynı görevi görür.

Kodu: (dahil kurulum, nesne listesinde fayda ve ihtiyacınız sonra kodu için bazı fonksiyonlar.)

// just for a 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 a new array of label/value to match the question 
// http://stackoverflow.com/questions/36452275/jquery-ui-autocomplete-multiselect-not-working 
var newarr = []; 
for (var a = 0; a < availableTags.length; a++) { 
    newarr.push({ 
    label: availableTags[a], 
    value: availableTags[a] + "v" + a 
    }); 
} 

fonksiyonel parçalar: Burada

// some namespaced functions to use 
var myApp = myApp || {}; 
myApp.arrayObj = { 
    indexOf: function(myArray, searchTerm, property) { 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) return i; 
    } 
    return -1; 
    }, 
    indexAllOf: function(myArray, searchTerm, property) { 
    var ai = []; 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) ai.push(i); 
    } 
    return ai; 
    }, 
    lookup: function(myArray, searchTerm, property, firstOnly) { 
    var found = []; 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) { 
     found.push(myArray[i]); 
     if (firstOnly) break; //if only the first 
     } 
    } 
    return found; 
    }, 
    lookupAll: function(myArray, searchTerm, property) { 
    return this.lookup(myArray, searchTerm, property, false); 
    }, 
    remove: function(myArray, searchTerm, property, firstOnly) { 
    for (var i = myArray.length - 1; i >= 0; i--) { 
     if (myArray[i][property] === searchTerm) { 
     myArray.splice(i, 1); 
     if (firstOnly) break; //if only the first term has to be removed 
     } 
    } 
    } 
}; 
myApp.func = { 
    split: function(val) { 
    return val.split(/,\s*/); 
    }, 
    extractLast: function(term) { 
    return this.split(term).pop(); 
    } 
}; 

// test a lookup 
//var ai = myApp.arrayObj.lookupAll(newarr, "AppleScript", "label"); 
//console.dir(ai); 

// test an index of an 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 the result objects in this array 
var holder = []; 

function AutoCompleteMrnPatient() { 
    $('#patientmrntxts').autocomplete({ 
    source: function(request, response) { 
     // delegate back to autocomplete, but extract the last term 
     response($.ui.autocomplete.filter(
     newarr, myApp.func.extractLast(request.term))); 
    }, 
    /* commented out and use the 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 this in a "holder" array if not in there already 
     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 the current input 
     terms.pop(); 
     // check if duplicate and if not push it in 
     if (exists === -1) { 
     //the selected item 
     terms.push(ui.item.value); 
     } 
     // add placeholder to get the comma-and-space at the 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(); 

bir örnek Yukarıdaki çalışma: