带有 JSON 列表的 jQueryui 自动完成功能

Question

我是 jQuery 的菜鸟，我需要一些关于自动完成搜索的帮助。

我正在调用返回以下内容的 REST 服务：

{ “成功”：“真”， "errmsg":"", “列表”：[ { "ItemDesc":"18 16GA CMP GALV CORR PI", "项目编号":"78398", “产品编号”：“1318CMP16”， “别名”：“70370” }, { "ItemDesc":"18 16GA CMP GALV BAND", "项目编号":"83063", “产品编号”：“1318CMP16BG”， "别名":"18ACCMPB" }, { "ItemDesc":"48 CMP BAND 12G", "项目编号":"120404", “产品编号”：“1348CMPB”， “别名”：“CMB1248” } ] }

我正在尝试自动完成以搜索这些结果并在列表中显示“ItemDesc”，以便用户可以单击一个。

$（函数（）{ $("#search").autocomplete({ //来源：“/ItemSearch/994/092468/CMP” }); });

目前，自动完成列表中唯一会显示的是“true”（REST 调用的 JSON 结果中的“success”值）。如何让它显示返回的“ItemDesc”列表？

Answer 1

我假设在您的自动完成中，您使用 jQuery.ajax 向服务提出请求。如果是这样，则将ajax dataType:设置为json，在success:设置中设置一个函数，然后在该函数中使用.map将返回的数据处理成你想要的形式。你可以在 jQuery 文档中找到这个 here 的一个很好的例子。以下是该页面上示例源的相关 sn-p：

    $( "#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.name
          }
        }));
      }
    });