Jquery UI自動完成MultiSelect不工作

Question

我想出了我搜索了很多的問題，並嘗試瞭解決我的問題的每種方法，但沒有任何迴應。我想使用自動完成在文本框中選擇多個值，但是我添加第一個項目自動完成不會在第一個值添加後加載值，如圖所示。我的代碼遵循

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

我有機會來看看這一點。我做如下假設和看法：

• 你只需要獨特的價值觀，沒有重複 - 因此我只保留新值，如果它們是唯一
• 你的價值不包含逗號 - 將複雜的分割功能
• 您可能需要跟蹤這些值並對它們進行處理。因此，我將它們推入一個名爲「持有者」的數組中 - 請注意，如果從列表中刪除選擇內容，我不會刪除值 - 您可以使用我提供的函數執行此操作（查找和刪除它們的方法等。 ）
• 您必須確定您是否希望顯示項目的值或標籤。
• 我沒有正確測試標籤/值對的值，所以我創建了一個值。我假設你的ajax能夠工作 - 所以我爲我的測試評論了這一點，並使用了我創建的對象列表的源代碼。
• 您的source拼寫錯誤爲「回覆」，但我沒有解決該問題。
• AutoCompleteMrnPatient基本上與文檔就緒處理程序相同。

代碼：（包括設置，該對象列表上的實用程序，然後你需要的代碼的一些功能。）

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

功能部件：

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

下面是一個示例的上述工作：https://jsfiddle.net/xvu9syuf/1/