5

当使用jQuery UI 自动完成 组合框时，我认为会有一个选项来强制仅基于列表的有效键条目。有什么办法不允许无效键，所以你只能在列表中输入有效的项目？另外，有没有办法设置组合框的默认值？

如果我的列表有（C#、Java、Python）

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

4

4 回答 4

13

更新 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();
        }
    });

笔记：

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

让我知道！

于 2010-05-04T19:46:20.293 回答
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 功能，那么请看这里：如何在 jQuery UI 自动完成中实现“mustMatch”和“selectFirst”？

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

于 2010-05-06T08:52:59.033 回答
1

您的问题似乎也是jQuery 插件论坛上的常见请求，并且在如何在 jQuery UI 自动完成中实现“mustMatch”和“selectFirst”人们一直在讨论这个问题。

这个问题的公认答案有效。所以Doc Hoffiday的解决方案确实值得获得声誉积分。

或者，您可以使用Jörn Zaefferer 的自动完成功能和“ mustMatch ”选项。

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

<input id="tags" />

更新

最初，我错过了您想要一个组合框解决方案。谢谢你说得更清楚。

我已经调整了组合框示例。

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

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

更新 2

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

我已经调整了我之前的组合框示例。

于 2010-04-30T11:37:12.893 回答
0 
$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

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

于 2010-12-15T15:34:59.257 回答