jQuery自動完成自定義數據和顯示除了標籤，值

Question

我想從json中拉出一些數據並使用jquery自動完成顯示它們。

json數組包含ID，標題，日期。在顯示屏上，我想顯示標題和日期，並點擊我想解析該標題的特定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

你用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); 
      } 
     }) 
    }, 

的部件將很好地工作額外屬性，你就必須有至少一個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); 
}; 

Answer 2

在$就成功，你應該通過包含標籤和值的對象，而不是僅標籤字符串，那麼你可以將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

試試這個。把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); 
      };