jQuery自动完成自定义数据并显示除了标签，值

Question

我正在尝试从 json 中提取一些数据并使用 jquery 自动完成来显示它们。

json 数组包含 ID、Title、Date。在显示屏上，我想显示标题和日期，单击时我想解析该标题的特定 ID。

所以目前我有：

$("input").autocomplete({
      source: function (d, e) {
          $.ajax({
              type: 'GET',
              url: url + mode + encodeURIComponent(d.term) + key,
              dataType: "jsonp",
              success: function (b) {
                  var c = [];
                  $.each(b.results, function (i, a, k) {
                    c.push(a.title + " " + a.date) // Displays Title and Date
                  });
                  e(c)
              }
          })
      },
      select: function (a, b) {
          console.log(b);
            // Appends an array with 2 keys: Value and Label. 
            // Both display the title and date as shown above.
          }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>"+ item.label + "</a>" ) 
                       // Here I want to append a.id as class of this
                       // but the only values are value and label.
                    .appendTo( ul );
            };

那么我该如何追加<li class="' + a.id + '">" + a.title + " " + a.date + "</li>"

Answer 1

试试这个。将 ID 放在 ajax 调用的值中。

$( "input" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: url + mode + encodeURIComponent(d.term) + key,,
          dataType: "jsonp",
          success: function( data ) {
            response( $.map( data, function( item ) {
              return {
                label: item.title ", " + item.date,
                value: item.id
              }
            }));
          }
        });
      }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<li "+ "class="+"item.value + ">"item.label + "</li>" ) 
                    .appendTo( ul );
            };

Answer 2

在 $.ajax 成功后，您应该传递一个包含标签和值的对象，而不仅仅是标签字符串，然后您可以将 a.id 分配给 item.value。像这样：

$("input").autocomplete({
  source: function (d, e) {
      $.ajax({
          type: 'GET',
          url: url + mode + encodeURIComponent(d.term) + key,
          dataType: "jsonp",
          success: function (b) {
              var c = [];
              $.each(b.results, function (i, a, k) {
                c.push({'value':a.id, 'label':a.title + " " + a.date}) // Displays Title and Date
              });
              e(c)
          }
      })
  },
  select: function (a, b) {
      console.log(b);
        // Appends an array with 2 keys: Value and Label. 
        // Both display the title and date as shown above.
      }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li class=\""+item.value+"\"></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

您也可以将原始对象作为标签 (c.push({'value':a.id, 'label':a})) 传递，并保留_renderItem 的格式（其中item.label 与a 相同）

Answer 3

您正在通过 AJAX 成功函数内部的 $.each 循环去除额外的属性（作为旁注，我很确定 $.each 的回调不采用第三个参数）。只需将 label 属性附加到每个结果项，它应该可以正常工作：

  source: function (d, e) {
      $.ajax({
          type: 'GET',
          url: url + mode + encodeURIComponent(d.term) + key,
          dataType: "jsonp",
          success: function (b) {
              var c = [];
              $.each(b.results, function (i, a) {
                a.label = a.title + " " + a.date;
                c.push(a);
              });
              e(c);
          }
      })
  },

小部件可以与 extra 属性一起正常工作，您只需必须至少有一个 label 或 value 属性。

现在在您的_renderItem 函数中，您可以访问每个项目的title 和date 属性：

.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>"+ item.label + "</a>" ) 
        .addClass(a.id) // <---
        .appendTo( ul );
};