jquery-ui - jquery 自动完成渲染项

Question

我有以下代码。它不会产生 js 错误。无法自动完成以显示任何结果：

$(function() {
    $.ajax({
    url: "data.xml",
    dataType: "xml",
    cache: false,
    success: function (xmlResponse) {
        var data_results = $("Entry", xmlResponse).map(function () {
            return {
                var1: $.trim($("Partno", this).text()),
                var2: $.trim($("Description", this).text()),
                var3: $.trim($("SapCode", this).text()),
                var4: $("Title", this).text(),
                var5: $.trim($("File", this).text()),
                var6: $.trim($("ItemID", this).text())
            };
        }).get();

        $("#searchresults").autocomplete({
            source: data_results,
            minLength: 3,
            select: function (event, ui) {
                ...
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" ).data("item.autocomplete", item)
                    .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
                    .appendTo( ul );
        };

    }
});

有什么想法我可能会错过吗？提前致谢。

Answer 1

似乎.data('autocomplete')就是现在.data('ui-autocomplete')。

来源： http: //jqueryui.com/upgrade-guide/1.10/#re​​moved-data-fallbacks-for-widget-names

Answer 2

默认情况下，自动完成希望您的源数组包含具有label属性、value属性或两者兼有的对象。

考虑到这一点，您有两种选择：

1. 当您处理来自 AJAX 调用的数组时，将标签或值属性添加到源对象：

   var data_results = $("Entry", xmlResponse).map(function () {
       return {
           var1: $.trim($("Partno", this).text()),
           var2: $.trim($("Description", this).text()),
           var3: $.trim($("SapCode", this).text()),
           var4: $("Title", this).text(),
           var5: $.trim($("File", this).text()),
           var6: $.trim($("ItemID", this).text()),
           value: $.trim($("Description", this).text())
       };
   }).get();
   

   您分配的value将用于focus、select和 搜索。

2. 更改source函数以执行自定义过滤逻辑：

   $("#searchresults").autocomplete({
       source: function (request, response) {
           var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
   
           response($.grep(data, function (value) {
               return matcher.test(value.var1) || 
                      matcher.test(value.var2);
               /* etc., continue with whatever parts of the object you want */
           }));
       },
       minLength: 3,
       select: function (event, ui) {
           event.preventDefault();
           this.value = ui.var1 + ui.var2;
       },
       focus: function (event, ui) {
           event.preventDefault();
           this.value = ui.var1 + ui.var2;
       }
   }).data( "autocomplete" )._renderItem = function( ul, item ) {
           return $( "<li></li>" ).data("item.autocomplete", item)
               .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
               .appendTo( ul );
   };
   

   请注意，使用此策略，您必须实现自定义select和focus逻辑。