4

我当前的代码如下所示：

$(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的ui.item对象上？

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

注意 如果您将 ajax 调用替换为固定数组[{id: 1, label: 'bob', value: 'creep'}, {id: 2, label: 'joe', value: 'friend'}]，则该id属性似乎在 select 事件中通过就好了。

4

4 回答 4

3

尝试将所有属性都小写，并像这样映射：

response( $.map( data, function( item ) {
    return {
        label: item.name,
        value: item.value,
        id: item.id
    }   //  return object
}));    //  response
于 2013-10-22T17:30:21.597 回答
2

根据jQuery UI 1.8.20 源码，item 对象直接存储在<li>使用 jQuerydata()中。responsejQuery UI 中唯一可以在回调和对象存储之间更改对象的地方，就像data在私有函数中一样。如果您传递的对象是字符串，它将仅显式保留标签和值，但否则即使该函数也应保持您的对象完好无损。_normalize_normalize

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

于 2013-10-19T06:22:50.643 回答
1

我找到了解决方案！参考这个JSFiddle演示

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

于 2013-10-21T13:23:07.847 回答
0

在您的源请求页面上，您应该将您的记录放在一个名为“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;
       }

});

这就是我这样做的方式，在我的情况下它是有效的。也许有一些不必要的线条，但如果你愿意，你可以随意改变它:)

于 2013-10-22T10:15:15.887 回答