您能否限制使用JQuery UI自动完成组合输入无效的击键？

Question

使用时 jQuery UI自动完成 组合框, ，我认为将有一个选择仅根据列表强制有效的密钥条目。有什么方法不允许无效的密钥，因此您只能在列表中输入有效的项目？另外，是否有一种方法可以设置ComboBox的默认值？

如果我的清单有（C＃，Java，Python）

我可以开始键入“ abcds。”。它可以让我输入它。我只想允许有效的条目。

Answer 1

更新2

Tested on
Internet Explorer 6 and later
Chrome
Firefox
Opera

演示： http://so.lucafilosofi.com/can-you-restrict-entering-invalid-keystrokes-with-jquery-ui-autocomplete-compobobox

核心JavaScript代码：

    var Tags = ['csharp', 'java', 'python' ];

    $("#autocomplete").keypress(function(event) {
        //Firefox workaround..
        if (!event.which &&
            ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {

            event.which = event.charCode || event.keyCode;
        }
        var charCode = String.fromCharCode(event.which).toLowerCase();
        var search_val = this.value + charCode;
        var x = search_val.length - 1;
        var match;
        for (var i = 0; i < Tags.length; i++) {
            if (charCode == Tags[i][x] && Tags[i].indexOf(search_val) != -1) {
                match = true;
            }
        }
        //Backspace functionality added!
        if (!match && event.which != 8 ) {
            event.preventDefault();
        }
    });

笔记：

1. 仅根据列表强制有效的密钥输入；
2. 设置默认值；
3. 轻量级实施;-)

让我知道！

Answer 2

设置自动完成后，使用此代码来防止空间字符并等于字符（ASCII代码32和61）。并设置默认值；

     $("#myautocompletectrl").keypress(function (e) {
        if (e.which == 32 | e.which == 61) {
          e.preventDefault();
        }
     }).val('mydefaultvalue');

它的作用就像钥匙从未被压过（正如您所说的那样）。

在Firefox 3.63和jQuery UI 1.8自动填充上进行了测试。

另外，如果您还想在jQuery UI 1.8 AutoComplete中实现必不可少的功能，请在此处查看： 如何在jQuery UI自动完成中实现“必须匹配”和“ selectfirst”？

编辑： 我看到您已经在我的帖子上阅读并评论了.... :)

Answer 3

您的问题也似乎是关于 jQuery插件论坛 并在 如何在jQuery UI自动完成中实现“必须匹配”和“ selectfirst” 人们一直在讨论这个问题。

这 接受的答案 对于这个问题有效。所以 Doc Hoffiday的解决方案确实值得获得声誉。

或者您可以使用 JörnZaefferer的自动完成 与“必须匹配“ 选项。

<script type="text/javascript">
$(document).ready(function(){
    var availableTags = ["csharp", "java", "python"];
    $("#tags").autocomplete(availableTags, {
        mustMatch: true
    });
});
</script>

<input id="tags" />

更新

最初，我错过了您想要一个ComboBox解决方案。感谢您使这一更加清晰。

我已经调整了Combobox示例。

我需要进行一些更改，以使其实际上在形式中起作用。我引入了短暂的延迟，以确保事件以正确的顺序发生。除此之外，我插入了Doc Hoffiday的解决方案。

我使用了“更改”事件，但是您也许还可以使用“关闭”事件获得一些工作。我讨厌这么说，但是到目前为止，我与新的jQuery UI自动完整合作的经验是，它有点不可靠。当您配置了多种类型的事件回调时，事情似乎会弄乱。

更新2

我添加了一个基于Doc Hoffiday解决方案的新自定义选择器，以便在匹配有效选项的开头时不会覆盖输入的文本。我还对其进行了更新，以便将提供的选项限制为更精确的匹配的来源。我希望这更接近您的要求。

我已经调整了以前的Combobox示例。

Answer 4

$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

它对我有用...谢谢你：D