jquery UI自动完成支持是否限制在支持多个值的无效值上键入？

Question

我正在接管一个新的网站,它使用了一个旧的不推荐使用的jquery autocomplete插件版本.我正在尝试使用最新的jquery ui自动完成重新创建功能,并且有一个功能我似乎无法复制.

我想在有多个值允许的情况下复制"mustMatch"功能.

所以基本上,如果我开始输入任何未显示在任何搜索结果中的测试(甚至是部分字符串搜索),它会重置该字段的条目(而不是让我输入不在有效列表中的垃圾)选择)

所以我可以说我的名单(本地)是{"Bird","Song","Happy"}

它会让我输入

 Bird, Son

但如果我在之后键入z它会保持打开状态

    Bird, Son

告诉我这是一个无效的条目

这可以在jquery ui自动完成中执行吗？

我看到很多来自谷歌的老帖子提出类似的问题和答案,但是没有一个似乎与多个值一起工作(许多似乎根本不工作:()

Answer 1

您可以使用这种代码段:

{我在这里使用keyup事件进行检查,但在现代浏览器中,您可以使用输入(oninput)事件或绑定onpaste事件}

http://jsfiddle.net/q2SSF/

 var availableTags = [
     "Bird",
     "Son",
     "Happy"];

 function split(val) {
     return val.split(/,\s*/);
 }

 function checkAvailable(term) {
     var length = term.length,
         chck = false,
         term = term.toLowerCase();
     for (var i = 0, z = availableTags.length; i < z; i++)
     if (availableTags[i].substring(0, length).toLowerCase() === term) return true;


     return false;
 }

 function extractLast(term) {
     return split(term).pop();
 }

 var $autocomplete = $("#autocomplete")
 // don't navigate away from the field on tab when selecting an item
 .on("keydown", function (event) {
     if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
         event.preventDefault();
     }
 })
     .on("keyup", function (event) {
     var ac_value = this.value;
     if (!checkAvailable(extractLast(ac_value))) this.value = ac_value.substring(0, ac_value.length - 1);
 })
     .autocomplete({
     minLength: 0,
     source: function (request, response) {
         // delegate back to autocomplete, but extract the last term
         response($.ui.autocomplete.filter(
         availableTags, extractLast(request.term)));
     },
     focus: function () {
         // prevent value inserted on focus
         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;
     }
 });