只允许选定的值从下拉列表中自动填充字段

Question

从值从数据库表中的列表，我需要自动完成功能，允许用户只类型/选择。我不希望被选中的原因后，他们能够进入自由文本。

我已经提到了类似的帖子jQuery UI AutoComplete: Only allow selected valued from suggested list1但我有一个不同的问题。

我们面临的挑战是可以接受的选项列表中包含特殊字符，特别是"("和")"。当我输入一个选项（我可以在下拉菜单中看到它下来，但是当我使用箭头键选择它会去上一个选项。

从PHP可接受的选择阵列被以JavaScript使用访问

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: /(/

因此，似乎该问题与KEYUP功能相关的

我已经尝试（1）字符集= “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/

这是很容易实现，并允许用户只能选择可用的选项，并对其进行编辑。也许别人会觉得这非常有用。