Question

我目前的代码如下：

$(document).ready(function () {
    $('#txtSearchForTrainingFacility').autocomplete({
        select: function (event, ui) {
                    searchCallback(event, ui);
                },      //  select
        source: function (request, response) {
            $.ajax({
                url: 'http://localhost:49795/Ajax/Search/' + $('#txtSearchForTrainingFacility').val(),
                dataType: 'json',
                data: {},
                success: function (data) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.Name,
                            value: item.Value,
                            id: item.ID
                        }   //  return object
                    }))     //  response
                }           //  success
            })              //  ajax
        }                   //  source function
    });                     //  autocomplete
});                         //  document.ready

您可以在ajax.success事件函数中看到我正在映射返回包含label，value和id属性的对象 - 而autocomplete.select方法的ui.item参数仅包含label和value。

我做错了什么？如何让id属性显示在autocomplete.select的{{1}}对象上？

ajax调用的结果是一个json数组，每个元素都包含一个包含属性ui.item，Name和Value的对象。

注意如果用固定数组ID替换ajax调用，那么[{id: 1, label: 'bob', value: 'creep'}, {id: 2, label: 'joe', value: 'friend'}]属性似乎在select事件中就可以了。

Answer 1

尝试将所有attribs设置为小写，并映射如下：

response( $.map( data, function( item ) {
    return {
        label: item.name,
        value: item.value,
        id: item.id
    }   //  return object
}));    //  response

Answer 2

根据the jQuery UI 1.8.20 source，项目对象使用jQuery <li>直接存储在data()中。 jQuery UI中唯一可以在response回调和data对象存储之间更改对象的地方位于the _normalize private function。如果您传递的对象是字符串，它将仅显式保留标签和值，否则即使_normalize函数也应保持对象完好无损。

这一点以及传递静态数组解决了您的问题这一事实让我相信您的问题在于来自您服务器的JSON，而不是您发布的JavaScript代码段。您的代码假定ASP.NET服务器的默认ID字段;可能值得仔细检查以确保您仍然将该字段名称作为默认名称。

Answer 3

我找到了解决方案！请参阅 JSFiddle演示

使用firebug检查列表项，您将能够看到基础结构。函数_renderItem()对您有用！通过使用此功能，您可以自定义每个列表项。如需进一步参考，请参阅此链接 http://api.jqueryui.com/autocomplete/#method-_renderItem

Answer 4

在您的源请求页面上，您应该将记录放在一个名为“id”，“label”和“value”的数组中，如您所述。如果需要，您还可以创建另一个名为[description]（如有必要）

将数组返回给AJAX使用 serializeJSON（returnArray）

有我的榜样。

function split(val){
      return val.split(/,\s*/);
}

function extractLast(term){
      return split(term).pop();
}

$("#example").autocomplete({

     source: function(request, response){
          $.getJSON('http://localhost:49795/Ajax/Search.php', {
               term: extractLast(request.term)
          }, response);
     },

     search: function(){
          // custom minLength
          var term = extractLast(this.value);
          if (term.length < 2) {
               return false;
           }
      },

      focus: function(){
           // prevent value inserted on focus
           return false;
      },

      select: function(event, ui){
           this.value = terms.push(ui.item.id);
           return false;
       }

});

这就是我这样做的方式，在我看来它是有效的。也许有一些不必要的行，但如果你想要你可以随意改变它：）

如何为jQuery自动完成选择事件附加其他属性

4 个答案: