Question

我想选择自动填充框项目列表。但它不起作用。我已经写了这个代码来获取该项目。每当我使用self._renderItemData = function (ul, item)这个函数自定义的方式选择停止，当我评论这个功能我的代码工作正常。请帮我知道我哪里错了。我用jquery ui 1.9来编写代码。

$(document).ready(function () {
    var term = "";
    var type = "";
    var key = "";
    $("#searchTextBox").autocomplete({
        minLength: 2,
        autoFocus: true,
        source: function (request, response) {
            $.ajax({
                url: "../CustomHandlers/SearchHandler.ashx",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                data: { term: request.term },
                success: function (data) {
                    if (!data || data.length == 0) {
                        response([{
                            label: "noMatched",                               
                            hcount:0,
                            type: "noResult",
                            key: "noResult"                             
                        }]);                            
                    }
                    else {
                        response($.map(data, function(item) {
                            return {
                                label: item.label,                                   
                                hcount:item.record,
                                type: item.type,
                                key: item.key
                            }
                        }))
                    }                    
                }                   
            });

            $.ui.autocomplete.prototype._renderMenu=function (ul, items) {
                var self = this;
                currentType = "";
                $.each(items, function (index, item) {
                    if (item.type != currentType) {
                        ul.append("<li class='ui-autocomplete-type'>" + item.type + "</li>");
                        currentType = item.type;
                    }

                    self._renderItemData(ul, item);

                });
                self._renderItemData = function (ul, item) {
                    var searchhtml = "<a class='autocomplitList'>" + item.label + "<span>" + "(" + item.hcount + ") " + "</span>" + "</a>";
                    return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append(searchhtml)
                            .appendTo(ul);
                };
            }

        }

        , select: function (event, ui)
        {  
                term = ui.item.label;
                type = ui.item.type;
                key = ui.item.key;
               // ui.item.option.selected = true;


               //  $("#searchTextBox").val(ui.item.label);
                // return false;
                //var selectedObj = ui.item.key;
             //   alert("Selected: " + selectedObj);  
        }
        ,open: function (event, ui) {
                //event.addClass("nodis");
        }
        ,close: function () {
            // event.removeClass("nodis")
            this._trigger("close");
            }


    });

Answer 1

试试这个

$(document).ready(function() {
    var term = "";
    var type = "";
    var key = "";

    $.ui.autocomplete.prototype._renderMenu = function(ul, items) {
        var self = this;
        currentType = "";
        $.each(items, function(index, item) {
                    if (item.type != currentType) {
                        ul.append("<li class='ui-autocomplete-type'>"
                                + item.type + "</li>");
                        currentType = item.type;
                    }

                    self._renderItemData(ul, item);

                });
        self._renderItemData = function(ul, item) {
            var searchhtml = "<a class='autocomplitList'>" + item.label
                    + "<span>" + "(" + item.hcount + ") " + "</span>" + "</a>";
            return $("<li></li>").data("item.autocomplete", item)
                    .append(searchhtml).appendTo(ul);
        };
    }

    $("#searchTextBox").autocomplete({
                minLength : 2,
                autoFocus : true,
                source : function(request, response) {
                    response([{
                                label : "Value 1",
                                hcount : 0,
                                type : "t1",
                                key : "v1"
                            }, {
                                label : "Value 2",
                                hcount : 0,
                                type : "t1",
                                key : "v2"
                            }, {
                                label : "Value 3",
                                hcount : 0,
                                type : "t2",
                                key : "v3"
                            }, {
                                label : "Value 4",
                                hcount : 0,
                                type : "t3",
                                key : "v4"
                            }]);
                }

                ,
                select : function(event, ui) {
                    term = ui.item.label;
                    type = ui.item.type;
                    key = ui.item.key;
                    // ui.item.option.selected = true;

                    // $("#searchTextBox").val(ui.item.label);
                    // return false;
                    // var selectedObj = ui.item.key;
                    // alert("Selected: " + selectedObj);
                },
                open : function(event, ui) {
                    // event.addClass("nodis");
                },
                close : function() {
                    // event.removeClass("nodis")
                    this._trigger("close");
                }

            });

    $("#searchTextBox").data('autocomplete')._renderMenu = function(ul, items) {
        var that = this;
        var currentType = "";
        $.each(items, function(index, item) {
                    if (item.type != currentType) {
                        ul.append("<li class='ui-autocomplete-type'>"
                                + item.type + "</li>");
                        currentType = item.type;
                    }
                    $("<li></li>").addClass('newp').append($("<a></a>")
                            .text(item.label)).appendTo(ul).data(
                            "ui-autocomplete-item", item);;
                });
    }
});

演示：Fiddle

Jquery自动完成选择不起作用

1 个答案: