Question

我有简单的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中，如上所示，它仍然没有用。

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

这似乎在某处有些愚蠢的错误，但让我难过。有什么建议吗？

编辑1：顺便说一句，如果我删除焦点并选择处理程序，则自动完成功能将使用其默认功能。

编辑2：如果有人可以在自己的计算机上测试，那就太棒了

Answer 1

您在此处尝试使用默认功能进行了一些更改。

您希望在选中
您希望在进行选择时显示标签，而不是值。

这些目前都不起作用的原因相关且简单：<input>字段只有一个与之关联的值，而不是单独的“标签”和“值”。当您从列表中选择“自动填充”选项时，它将被填充“值”。

对于第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，但通常使用用户可能自己键入的内容是有意义的。当然，如果您这样做，也可以在ui.item.value事件中使用ui.item.label代替focus:。

如上所述使源变得清晰，您可以完全放弃select:事件。

Answer 2

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

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

这是一个fiddle

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

2 个答案: