jQuery UI 自动完成在请求/响应时传递附加数据

Question

我正在使用 jQ UI Autocompletebox 小部件。

这是使用 ACB 的 jQ：

$('.drug-name').autocomplete({
  source: function (request, response) {
    $.ajax('/Drugs/JsonIndex/',
      {
        dataType: 'json',
        data: { searchBy: request.term },
        success: function (data) {
          response($.map(data, function (item) {
            return { value: item.Name, label: item.Name };
            /*1****************/
          }));
        },
        select: function (event, ui) {
            /*2****************/
        },
        messages: {
          noResults: '',
          results: ''
        },
        _renderItem: function (ul, item) {
            /*3****************/ 
          return $('<li>')
                    .html(item.label)
                    .prop('title', item.description)
                    .data('drug-id', item.value)
                    .appendTo(ul);
        }
      });
  }
});

我已经标记了我想谈论的那些地方：

1. 从请求中接收到的data 参数包含属性Id、Name 和Description。我希望生成的 lis 使用 Name 作为显示值，Description 作为工具提示 (title="Description")，并将 Id 设置为附加数据字段
2. 当一个元素被选中时，我想用所选项目的 ID 设置一个隐藏字段
3. 我想过用这个函数来设置它，但首先我想不出一种方法来传递除 jQ 的标准化值和标签之外的另一个结构。

Answer 1

好吧，经过一番研究，我发现_renderItem sn-p 应该是这样附加的：

$('.drug-name').autocomplete({
  source: function (request, response) {
    $.ajax('/Drugs/JsonIndex/',
      {
        dataType: 'json',
        data: { searchBy: request.term },
        success: function (data) {
          response($.map(data, function (item) {
            return { 
                     value: item.Name,
                     label: item.Name,
                     description: item.Description,
                     id: item.Id
                   };
          }));
        },
        select: function (event, ui) {
        },
        messages: {
          noResults: '',
          results: ''
        }        
      });
  }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
  return $('<li>')
          .html(item.label)
          .prop('title', item.description)
          .data('drug-id', item.id)
          .appendTo(ul);
};