Question

我需要一个自动完成功能，该功能允许用户仅从数据库表的值列表中键入/选择。选择原因后，我不希望他们能够输入自由文本。

我曾提到过类似的帖子jQuery UI AutoComplete: Only allow selected valued from suggested list 1，但问题有所不同。

面临的挑战是可接受的选项列表，这些选项带有特殊字符，特别是"("和")"。当我使用（键入选项时，我可以在下拉菜单中看到它，但是当我使用箭头键选择它时，它将转到上一个选项。

使用

在javascript中访问PHP可接受的选项数组

var validOptions = <?php echo json_encode($validOptionsArray); ?>;

JavaScript是

previousValue = "";

$('.getValidOptions').autocomplete({
    source: validOptions,   

}).keyup(function() {
    var isValid = false; 
    for (i in validOptions) {
       if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue;
    } else {
        previousValue = this.value;
    }
});

我了解这是怎么回事。如果我删除行

this.value = previousValue;

它将允许我使用（选择选项，但用户可以继续输入。

但是，我希望保留这一行，因为它会阻止用户向下拉菜单中添加文本。

我可以使用鼠标来选择选项，但是在控制台中出现错误

Uncaught SyntaxError: Invalid regular expression: /(/

所以看来问题出在键盘功能上

我尝试了（1）charset =“ utf-8”和（2）正则表达式，例如

(this.value).replace(/([.*+?^=!${}()|[\]\/\\])/g, '\\$1');

关于如何解决此问题的任何想法？

谢谢。

json_encode（$ validOptionsArray）中的数据为

Array
(
    [0] => NI: New Member
    [1] => NI: New Member (referred from current member)
    [2] => RI: Returning Member
    [3] => RI: Returning Member (with conditions)
    [4] => XI: Exclusive member (full/all access)
)

Answer 1

我决定使用jQuery inputToken http://loopj.com/jquery-tokeninput/

易于实现，并且允许用户仅选择可用选项，而不编辑它们。也许其他人会发现这很有用。

在“自动完成”字段中仅允许从下拉列表中选择值

1 个答案: