Question

使用the jQuery UI autocomplete 组合框时，我认为可以选择仅根据列表强制使用有效的密钥条目。有没有办法不允许无效密钥，所以你只能在列表中输入有效的项目？另外，有没有办法设置组合框的默认值？

如果我的列表有（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-combobox

核心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();
        }
    });

注意：

仅根据列表强制执行有效的密钥输入;

设置默认值;

轻量级实现; - ）

让我知道！

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自动完成中实现mustMatch功能，请查看此处：How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

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

Answer 3

您的问题似乎也是jQuery plugin forum和 How to implement “mustMatch” and “selectFirst” in jQuery UI Autocomplete 中的常见请求。人们一直在讨论此问题。

此问题的accepted answer有效。所以Doc Hoffiday的解决方案确实应该得到声誉点。

或者，您可以将Jörn Zaefferer's autocomplete与“ mustMatch ”选项一起使用。

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

<input id="tags" />

<强>更新

最初，我错过了你想要一个组合框解决方案。谢谢你让它更清晰。

I have tweaked the combobox example.

我需要进行一些更改才能使其在表单中正常工作。我引入了一个短暂的延迟，以确保事件以正确的顺序发生。除此之外，我插入了Doc Hoffiday的解决方案。

我使用了“更改”事件，但您也可以使用“关闭”事件获得一些工作。我不想这么说，但到目前为止我使用新的jQuery UI自动完成的经验是它有点不可靠。当你配置了多种类型的事件回调时，事情似乎搞得一团糟。

更新2

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

I have tweaked my previous combobox example.

Answer 4

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

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

你能用jQuery UI自动完成组合框限制输入无效击键吗？

4 个答案: