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

我正在使用jQueryUI自动填充小部件从JSON Web服务中获取数据。它非常类似于下面的例子：使用jQueryUI自动填充小部件控制所选项目的显示

<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，但我希望输入显示标签数据而不是数值数据。

来源

2011-02-17 Alex

那么你将不得不使价值与标签相同。在你的情况它看起来像这样：

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

来源

2011-02-17 23:35:14 Victor

如果您正在使用jQueryUI的自动完成构件，然后在窗口小部件的选择选项，您可以执行以下操作：

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

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

来源

2016-04-19 06:01:19

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

回答

相关问题