所选项目不应显示在自动完成列表中

Question

我正在使用自动完成 Web 服务 sing 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

就像你的问题在 cmets 中提到的 @Bindred 一样，更简单的解决方案是使用 Select2 jQuery 库。这不是您正在寻找的东西，但就 UX 而言，我认为它会实现类似的目标，并且可以轻而易举地开始工作。

我添加了一个示例供您使用：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);

  //});
});