Javascript JQuery UI自动完成插件中仅允许源值

是否可以将用户输入限制为仅源值

---

例如，如果源数组包含“

”粗体“、”普通“、”默认“、”100“、”200“

”，则用户只能键入这些值。

我同意雷菲尔的意见，因为您希望将可能的值限制为“自动完成”中的值，更安全的选择是使用“选择”下拉列表。 作为最终用户，在文本框中输入数据而无法编写所需内容可能会令人沮丧。选择“选择”下拉列表是“社会”接受的有限选择。

我想出了一个办法

将以下选项添加到插件。这适用于源为数组的情况

change: function (event, ui) {
        if (!ui.item) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                    valid = false;

        $.each(YOUR_SOURCE_ARRAY_NAME, function (index, value) {
               if (value.match(matcher)) {
               this.selected = valid = true;
                   return false;
               }
            });
            if (!valid) {
                // remove invalid value, as it didn't match anything
                $(this).val("");
            return false;
            }
        }
}

---

我看你已经有了解决办法。这里有一个类似的方法，因为我已经花了一些时间

---

我有一个简单的选择。看看这个：

基本上，文本框上的onChange事件清除值的效果是相同的

以下是js：

var validOptions = ["Bold", "Normal", "Default", "100", "200"];

$('#auto-complete-input').autocomplete({
    autoFocus: true,
    source: validOptions
});

function clearAutoCompleteInput() {
    $("#auto-complete-input").val('');
}

和html：

<label for="auto-complete-input">Select one: </label>
<input id="auto-complete-input" type="text" onChange="clearAutoCompleteInput()" />

选择一个：

这是一个老问题，但我所做的是

输入字段时将标志设置为false（onfocus）

在自动完成选择事件中将标志设置为true

在onblur事件字段中测试该标志

---

如果输入是真的，则输入是好的，否则输入是坏的。

对于这个“奇怪”的问题，很抱歉，但是为什么不做一个选择框呢？好吧，想想一辆漂亮的车，你必须倒车。。。。你会买吗？我不这么认为，因为你会因为倒车而烦恼，但我相信很多人都会同意这是一种错误的方式去做你想做的事。提示：您知道吗，如果您关注一个选择框，并开始键入一个值，它将选择该值？@tou您考虑过如果用户禁用javascript会发生什么吗？您不知道是否有人禁用javascript，如果您依赖用户输入数据，我将认真检查您的服务器端代码，以考虑意外数据；）最后，autocomplete应该在数组表单中有可能的条目列表，只需编写自己的方法，检查焦点更改或表单提交时数组中是否存在文本框文本。希望这能有所帮助。回答时要对问题进行评论。我更喜欢你们的解决方案，因为它能在每次击键时都有效。它可以更快地向用户提供反馈。如果输入只是失去焦点（例如，在输入之外单击鼠标左键），那么该值将不会被更正。因此，它还需要

onblur

处理程序来更正值after

isValid=true在for循环中。一旦设置为true，就无需进一步迭代
<label for="auto-complete-input">Select one: </label>
<input id="auto-complete-input" type="text" onChange="clearAutoCompleteInput()" />