作为数据源返回到 jqueryui 自动完成的 JSON 对象应该是什么样的？答案

【问题标题】：What should the JSON object that is returned as a datasource to jqueryui autocomplete look like?作为数据源返回到 jqueryui 自动完成的 JSON 对象应该是什么样的？
【发布时间】：2014-12-04 06:41:50
【问题描述】：

我正在查看此页面上的示例源代码（粘贴在下面）：

http://jqueryui.com/autocomplete/#remote

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: "/search",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

我的服务器返回的 json 对象应该是什么样的？现在是：

{source1:[],source2:[]}

我返回多个来源，并希望以如下示例所示的分类格式显示数据：http://jqueryui.com/autocomplete/#categories

首先，我只是想显示数据源。

【问题讨论】：

你的 ajax 应该像示例 [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ];
这使得结果出现了！ :) 但它不显示类别！它将它们全部显示为一个列表。如何让它们分成两个列表？喜欢：jqueryui.com/autocomplete/#categories
如果你会做小提琴会很有帮助
我不明白你的意思。我只是使用示例中的代码。 XD
我建议您阅读这篇博客文章，其中包含相关示例。 salman-w.blogspot.in/2013/12/…

标签： javascript jquery json jquery-ui autocomplete

【解决方案1】：

默认情况下，jQuery UI 自动完成接受两种格式的数据：

一个字符串数组，如["foo", "bar"]
具有标签和值属性的对象数组，如[{label:"foo", value:1000}, {label:"bar",value:2000}]

您要查找的不是实际的自动完成小部件，而是自定义或扩展版本called catcomplete。

为了使用它，您应该在加载 jQuery 和扩展默认自动完成功能的 jQuery UI 之后添加以下代码：

$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
  this._super();
  this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
  var that = this,
    currentCategory = "";
  $.each( items, function( index, item ) {
    var li;
    if ( item.category != currentCategory ) {
      ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
      currentCategory = item.category;
    }
    li = that._renderItemData( ul, item );
    if ( item.category ) {
      li.attr( "aria-label", item.category + " : " + item.label );
    }
  });
 }
});

您的数据源应如下所示：

var data = [
      { label: "anders", category: "" },
      { label: "andreas", category: "" },
      { label: "antal", category: "" },
      { label: "annhhx10", category: "Products" },
      { label: "annk K12", category: "Products" },
      { label: "annttop C13", category: "Products" },
      { label: "anders andersson", category: "People" },
      { label: "andreas andersson", category: "People" },
      { label: "andreas johnson", category: "People" }
    ];

具有 label 和 category 属性的对象数组

【讨论】：