1

我有简单的 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：如果有人可以在自己的计算机上进行测试，那就太好了

4

2 回答 2

1

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

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

这些目前都不起作用的原因是相关且简单的：<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:完全放弃该事件。

于 2012-09-14T08:28:45.020 回答
0

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

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

这是一个小提琴

于 2012-09-14T08:20:46.610 回答