選擇的項目不應該顯示在自動完成列表中

Question

我正在使用自動完成的Web服務唱JSON，如果我選擇了一個不能再出現在自動完成列表中的列表項目;

JSON AJAX代碼：

select: function (event, ui) { 
        var terms = split(this.value); 
        if (terms.length <= 10) { 
         // 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; 
        } 
        else { 
         var last = terms.pop(); 
         $(this).val(this.value.substr(0, this.value.length - last.length - 0)); // removes text from input 
         $(this).effect("highlight", {}, 1000); 
         $(this).addClass("red"); 
         $("#warnings").html("<span style='color:red;'>Max skill reached</span>"); 
         return false; 
        } 
       } 

我還附上截圖，請在這裏看到：

Answer 1

像@Bindred在評論你的問題中提到，一個更容易的解決辦法是使用Select2 jQuery庫。這不是你正在尋找的東西，但就用戶體驗而言，我認爲它會實現類似的目標，而且工作起來也很輕鬆。

我添加了一個例子供您使用：https://jsfiddle.net/9cqc5876/9/

HTML

<select id="txtExpertise" multiple="multiple"></select> 

JavaSript

$(document).ready(function() { 

    $("#txtExpertise").prop("disabled", "disabled"); 

    // do your ajax request for data 
    //$.getJSON("../WebServices/WebServiceSkills.asmx/GetAutoCompleteData", function(data) { 

    // fake json data 
    var data = {"languages": ["Java", "C", "C++", "PHP", "Visual Basic", 
     "Python", "C#", "JavaScript", "Perl", "Ruby"]}; 

    // populate the select 
    $.each(data.languages, function(key, val) { 
     $('#txtExpertise') 
     .append($("<option></option>") 
      .attr("value", key) 
      .text(val)); 
    }); 

    // activate the select2 
    $("#txtExpertise").select2(); 
    $("#txtExpertise").prop("disabled", false); 

    //}); 
});