jQuery UI自动完成类别不显示

时间:2012-11-21 16:59:44

标签: jquery json jquery-ui autocomplete jquery-ui-autocomplete

为什么类别会返回undefined的任何想法?

我收到的是物品而不是类别?

   $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var that = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                that._renderItemData( ul, item );
            });
        }
   });

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

    $("#people_q:not(.ui-autocomplete-input)").live("keyup", function (event) {
        $(this).catcomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/json/people_search.asp",
                    dataType: "json",
                    data: {
                        q:extractLast( request.term )
                    },
                    success: function (data) {
                        response($.map(data.results.result, function (item) {
                            return {
                                label: item.sresult,
                                value: item.sresult
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
        });
    });

以下是我用来提供自动填充的已检查有效Json。

{
    "results": {
        "count": "8",
        "result": [
            {
                "id": 0,
                "sresult": "web development",
                "category": "tag"
            },
            {
                "id": 1,
                "sresult": "entrepreneur",
                "category": "tag"
            },
            {
                "id": 2,
                "sresult": "Talks / Presentations",
                "category": "tag"
            },
            {
                "id": 3,
                "sresult": "music management",
                "category": "tag"
            },
            {
                "id": 4,
                "sresult": "User Experience Design",
                "category": "tag"
            },
            {
                "id": 5,
                "sresult": "English",
                "category": "tag"
            },
            {
                "id": 6,
                "sresult": "French",
                "category": "tag"
            },
            {
                "id": 7,
                "sresult": "entier Associates Ltd",
                "category": "company"
            }
        ]
    }
}

1 个答案:

答案 0 :(得分:1)

您提供response回调的数据不包含每个项目的category。您应该能够像这样改变success回调:

success: function (data) {
    response($.map(data.results.result, function (item) {
        return {
            label: item.sresult,
            value: item.sresult,
            category: item.category // <-----
        };
    }));
}