Question

我正在使用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>

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

Answer 1

那么你必须使值与标签相同。在你的情况下，它看起来像这样：

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

Answer 2

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

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

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

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

2 个答案: