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);
        }
      });
  }
});

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

从请求中收到的data参数包含属性Id，Name和Description。我希望生成的li使用Name作为显示值，将Description作为工具提示（title="Description"），并将Id设置为附加数据字段
当选择一个元素时，我想设置一个隐藏字段，其中包含所选项目的Id
我想过用这个函数设置它，但首先我想办法除了jQ的标准化值和标签之外的其他结构。

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);
};

jQuery UI Autocomplete在请求/响应上传递其他数据

1 个答案: