jQuery UI 自动完成在 request/response 上传递附加数据

Question

我正在使用 jQ UI 自动完成框小部件。

这是使用 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 的规范化值和标签 one 之外的另一个结构。

Answer 1

经过一番研究，我发现 _renderItem 代码段应附加如下：

$('.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);
};