Javascript 使用jQueryUI自动完成小部件控制所选项目的显示

我正在使用jQueryUI自动完成小部件从JSON web服务获取数据。其与下面的示例非常相似：

<script>
$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2
    });
});
</script>

$（函数（）{
$（“#城市”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“http://ws.geonames.org/searchJSON",
数据类型：“jsonp”，
数据：{
特色类：“P”，
样式：“完整”，
马克斯罗：12，
name_startsWith:request.term
},
成功：功能（数据）{
响应（$.map（data.geonames，函数（项））{
返回{
标签：item.name+（item.adminName1？，“+item.adminName1:”）+，“+item.countryName，
值：item.id
}
}));
}
});
},
最小长度：2
});
});

---

我的问题是，当从列表中选择某个内容时，如何控制输入框（#city）中的内容。目前，autocomplete运行良好，并将提供一个标签列表。但是，当您选择其中一个列表项时，它会将值放入输入中。在这种情况下，我想使用id，但我希望输入显示标签数据，而不是值数据。

您必须使值与标签相同。在您的情况下，它将如下所示：

success: function( data ) {
   response( $.map( data.geonames, function( item ) {
      return {
         label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
         value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
      }

   }));
}

我的猜测是，您需要用于其他目的的值。我也遇到过同样的情况，根据您的要求，有两种选择

您可以有一个隐藏字段，在选择选项时可以在其中存储值

这就是它的样子：

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id,
                            source: item
                        }
                    }));
                }
            });
        },
        minLength: 2,
        change: function(event, ui) {
           if (ui.item) {
              $('#your_hidden_input').val(ui.item.source.id);
              $(this).val(ui.item.value);
           }
        }
    });
});

---

如果您使用的是jQueryUI自动完成小部件，那么在小部件的选择选项中，您可以执行以下操作：

select: event.preventDefault();
         $("#city").val(ui.item.label);

这将在选择事件的输入字段中插入特定项目的标签数据