jQuery UI自动完成突然停止工作

jQuery UI autocomplete suddenly stopped working

本文关键字：突然 停止工作 UI jQuery      更新时间：2023-09-26

我有一个简单的jQuery UI自动完成功能，它可以工作，但现在不行了。代码如下：

<html>
    <head>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#city" ).autocomplete({
                source: function( request, response ) {
                    var cities = new Array();
                    cities.push({"label" : "Chicago", "value" : 1});
                    cities.push({"label" : "Houston", "value" : 2});
                    response(cities);
                },
                focus: function(event, ui) {
                    //console.log(ui.item.label);
                    $(this).text(ui.item.label);
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                },
                select: function(event, ui) {
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                }
            });
        });
    </script>
    </head>
    <body>
      <input id="city" />
    </body>
</html>

我使用焦点处理程序在文本框中显示标签，而不是值（这是自动完成默认情况下所做的）。现在发生的情况是，文本框既没有显示标签也没有显示值，它显示的是我键入的值（比如"Chi"）

这是有效的，但现在不行了。我认为这是因为我包含了一些其他javascript，并且出现了函数名冲突。但我把它移到了一个单独的HTML中，正如你在上面看到的那样，它仍然不起作用。

顺便说一句，如果我取消注释这些控制台日志语句，并从下拉列表中选择Chicago，那么所有这些语句都将打印Chicago。

这似乎是一个愚蠢的错误，但却让我不知所措。有什么建议吗？

编辑1:BTW，如果我删除焦点并选择处理程序，那么自动完成将使用其默认功能。

编辑2：如果有人能在自己的电脑上测试这一点，那就太好了

您似乎正在尝试对默认功能进行一些更改。

  1. 您希望在选择"已完成"变量时在主输入中预览该变量
  2. 您希望在进行选择时显示标签，而不是值

这两个字段目前都不起作用的原因既相关又简单：<input>字段只有一个与它们相关的值，而不是单独的"标签"answers"值"。当你从列表中选择一个"自动完成"选项时，它就是"值"，它会被填充。

对于点1，即focus:事件正在更新的部分，只需将.text(...)替换为.val(...)，因为这是您实际想要更新的<input>字段的属性：

focus: function(event, ui) {
    $(this).val(ui.item.label);
    event.preventDefault();
},

对于第2点，由于您实际上希望字段由标签而非值填写，因此您可以为两者填写相同的文本（如果给定平面数组，则为默认值）：

source: function( request, response ) {
    var cities = new Array();
    cities.push("Chicago");
    cities.push("Houston");
    response(cities);
},

请记住，自动完成始终是可选的。您所需要填写的value:是您后端可以完全消除歧义的内容。这可能是一个id，但通常使用用户可能自己键入的内容是有意义的。当然，如果您正在这样做，那么在focus:事件中使用ui.item.value而不是ui.item.label也可能是有意义的。

将源设置为如上所述的sane后，您可以完全删除select:事件。

我认为问题在于自动完成源的分配。这对我有效：

$(function() {
    var cities = [ 
        {"label": "Chicago", "value": 1}, 
        {"label": "Houston", "value": 2}
    ];                    

    $( "#city" ).autocomplete({
        source: cities, // assign the source directly
        focus: function(event, ui) {
            //console.log(ui.item.label);
            $(this).text(ui.item.label);
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        },
        select: function(event, ui) {
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        }
    });
});​

这是一个小提琴

相关文章：