jQuery UI自动完成支持是否在支持多个值的地方限制输入无效值? [英] Does jquery UI Autocomplete support restrict typing on invalid values where supporting multiple values?

问题描述

我要接管一个新网站，它使用的是旧的旧版本jQuery自动完成插件.我正在尝试使用最新的jquery ui自动完成重新创建该功能，但有一个我似乎看不到的功能复制.

I am taking over a new website and it was using an old deprecated version of the jquery autocomplete plugin. I am trying to recreate the functionality using the latest jquery ui autocomplete and there is one feature that i can't seem to replicate.

在有多个值允许的情况下 ，我正在尝试复制必须匹配"功能

I am trying to replicate the "mustMatch" functionality in cases where there are multiple values allows.

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

so basically, if i start typing any test that doesn't show up in any of the search results (even partial string search), it resets the entry for that field (instead of letting me type garbage that is not in the list of valid choices)

所以可以说我的列表(本地)是{"Bird"，"Song"，"Happy"}

So lets say my list (local) is {"Bird", "Song", "Happy"}

它会让我输入

 Bird, Son

但是如果我输入 z 之后，它会保持打开状态

but if i type z after that it stays on

    Bird, Son

让我知道这是无效的条目

to let me know that is an invalid entry

这是否可能在jQuery ui自动完成中完成?

Is this possible to do either in jquery ui autocomplete?

我看到很多来自google的旧帖子问类似的问题

I see a lot of old posts from google asking similar questions and answers like this one, but none seems to work with multiple values (and many don't seem to work at all :( )

推荐答案

您可以使用以下代码段:

You could use this kind of snippet:

{我正在使用此处的keyup事件进行检查，但是在现代浏览器中，您可以改用input(oninput)事件，也可以绑定onpaste事件}

{ I'm using here keyup event to check, but on modern browsers, you could use input (oninput) event instead or bind onpaste event too }

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

这篇关于jQuery UI自动完成支持是否在支持多个值的地方限制输入无效值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！