Jquery Ui AutoComplee select ui.item is undefined

本文关键字：item is undefined ui select Ui AutoComplee Jquery 更新时间：2023-09-26

我的页面上有一个自动完成功能，可以正确获取和显示数据。数据： Object { custId="CUST2", invoiceNo="B1"}jquery v1.8.2 minj查询用户界面 - v1.10.3

$("#invoiceNo").autocomplete({
        source : function(request, response) {
            if($.trim($(this.element).val())==""){
               return;
            }
            $.ui.autocomplete.prototype._renderMenu = function(ul, items) {
                var self = this;
                ul.append("<li><table width='100%' class='table table-condensed table-bordered' style='margin-bottom:0px;'><tr><td width='20%'><b>Invoice No</b></td><td width='20%'><b>Customer ID</b></td></tr></table></li>");
                $.each(items, function(index, item) {
                    self._renderItem(ul, item);
                });
            };
            $.getJSON("getInvoiceList.html", {
               query : $.trim($(this.element).val()),
                type:"del",
            }, response).error(function(xhr, ajaxOptions, thrownError) {
            }); 
        },
        open: function() { 
            // After menu has been opened, set width
            $('.ui-menu').width(700);
        },
        minLength : 1,
        select : function(event, ui) {
            alert(ui.item);
            $("#invoiceNo").val(ui.item.invoiceNo);
            //setCustomerDetails(ui.item.number);
            getInvoiceDetailForReturn(ui.item.invoiceNo);
            return false;
        },error: function (xhr, ajaxOptions, thrownError) {
            $.jGrowl(xhr.responseText); 
        }
    }).data("ui-autocomplete")._renderItem = function(ul, item) {               
         return $("<li></li>").data("item.autocomplete-item", item) .append("<a><table width='100%' class='table table-condensed table-hover' style='margin-bottom:0px;'><tr><td width='20%'>" + item.invoiceNo + "</td><td width='20%'>"+item.custId+"</td></tr></table></a>").appendTo(ul);
    };

首先我有错误$(...).autocomplete(...).data(...) is undefined它解决了这个问题

原来我不得不改变

data("Autocomplete" )._renderItemData = function( ul, item ) {

和

.data( "item.autocomplete", item )

自

 data("ui-autocomplete" )._renderItem = function( ul, item ) {

和

.data( "item.autocomplete-item", item )

所以它不会得到 UI.Item 对象...

切换到jQuery-UI 1.10时，我自己也遇到了这个问题。必须将item.autocomplete-item替换为 ui-autocomplete-item 。

因此，仅取代码块的最后 3 行，这将变为：

}).data("ui-autocomplete")._renderItem = function(ul, item) {               
  return $("<li></li>").data("ui-autocomplete-item", item) .append("<a><table width='100%' class='table table-condensed table-hover' style='margin-bottom:0px;'><tr><td width='20%'>" + item.invoiceNo + "</td><td width='20%'>"+item.custId+"</td></tr></table></a>").appendTo(ul);
};

这里再次是升级指南的链接。