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/