如何以表格格式显示具有多列的自动完成列表？

Question

我的文本框有自动完成功能。我想用新列以表格格式显示更多数据。

到目前为止我的代码：

<script type="text/javascript">

    function CNo(sender, args) {
        $(function () {
            $("#<%=txtCNo.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Webservice.asmx/GettxtCNo") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        async: false,
                        mustMatch: true,
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('^')[0],
                                    val: item.split('^')[1]
                                }
                            }))
                        },
                        error: function (response) {

                        },
                        failure: function (response) {

                        }
                    });
                    $.ui.autocomplete.prototype._renderMenu = function (ul, items) {
                    var self = this;
                    ul.append("<table><thead><tr><th>Name</th><th>City</th></tr></thead><tbody></tbody></table>");
                    $.each(items, function (index, item) {
                        self._renderItem(ul.find("table tbody"), item);
                    });
                };

                $.ui.autocomplete.prototype._renderItem = function (table, item) {
               return $("<tr></tr>")
              .data("item.autocomplete", item)
              .append("<td>" + item.value + "</td>" + "<td>" + item.val.split('~')[6] +  "</td>")
              .appendTo(table);
                };
                },
                select: function (e, i) {
                    $("#<%=hdnCNo.ClientID %>").val(i.item.val);
                    if (i.item.val == "No Records Found") {
                        $("#<%=hdnCNo.ClientID %>").val(-1);
                        document.getElementById('<%=txtCNo.ClientID%>').value = "";
                        return false;
                    }
                    checktxtCNorinfo();
                },
                minLength: 0
            }).bind('focus', function () { $(this).autocomplete("search"); });
        });
    }          
</script>

在此代码中，我在自动完成列表中得到结果，但无法从列表中选择任何项目。我错在哪里？

Answer 1

像这样使用查询

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            thead;

        if (this.options.showHeader) {
            table = $('<div class="ui-widget-header" style="width:100%"></div>');
            $.each(this.options.columns, function(index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
        $.each(items, function(index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function(ul, item) {
        var t = '',
            result = '';

        $.each(this.options.columns, function(index, column) {
            t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
        });

        result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
        return result;
    }
});


// Sets up the multicolumn autocomplete widget.
$("#search").mcautocomplete({
    // These next two options are what this plugin adds to the autocomplete widget.
    showHeader: true,
    columns: [{
        name: 'City',
        width: '150px',
        valueField: 'name'},
    {
        name: 'State',
        width: '120px',
        valueField: 'adminName1'},
    {
        name: 'Country',
        width: '120px',
        valueField: 'countryName'}],

    // Event handler for when a list item is selected.
    select: function(event, ui) {
        this.value = (ui.item ? ui.item.name : '');
        $('#results').text(ui.item ? 'Selected: ' + ui.item.name + ', ' + ui.item.adminName1 + ', ' + ui.item.countryName : 'Nothing selected, input was ' + this.value);
        return false;
    },

    // The rest of the options are for configuring the ajax webservice call.
    minLength: 1,
    source: function(request, response) {
        $.ajax({
            url: 'http://ws.geonames.org/searchJSON',
            dataType: 'jsonp',
            data: {
                featureClass: 'P',
                style: 'full',
                maxRows: 12,
                name_startsWith: request.term
            },
            // The success event handler will display "No match found" if no items are returned.
            success: function(data) {
                var result;
                if (!data || data.length === 0 || !data.geonames || data.geonames.length === 0) {
                    result = [{
                        label: 'No match found.'}];
                }
                else {
                    result = data.geonames;
                }
                response(result);
            }
        });
    }
});