jQuery的多列自动完成？答案

【问题标题】：Multi-column Autocomplete for jQuery?jQuery的多列自动完成？
【发布时间】：2010-04-15 21:33:34
【问题描述】：

是否有支持多列的 jQuery 的 AJAX 自动完成功能？我的意思是多个列，例如数据库表，而不仅仅是拆分列表。它将搜索第一列，但其余部分将在下拉列表中可见。

这样的事情存在吗？

【问题讨论】：

标签： jquery ajax jquery-plugins autocomplete

【解决方案1】：

try this code searching for one column but displaying multiple columns 
$(function() {
    $(".tb").autocomplete
            ({
                source: function(request, response) {
                    $.ajax({
                        type: "POST",
                        url: "WebService_GetData.asmx/GetCmbPostaKod",
                        dataType: "json",
                        data: "{ 'filterKey': '" + request.term + "' }",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function(data) {
                            response($.map(data.d, function(item) {
                            return { value: item.PostaKodu, label: item.IlAdi + ' ' + item.IlceAdi + ' ' + item.SemtAdi + ' ' + item.PostaKodu }
                            }))
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2,
                multiple: true,
                matchContains: true,
                formatItem: formatItem,
                formatResult: formatResult
            });
        });

        function formatItem(row) {
            return row[0] + " (<strong>id: " + row[1] + "</strong>)";
        }
        function formatResult(row) {
            return row[0].replace(/(<.+?>)/gi, ''); //removes html tags
        }

【讨论】：

【解决方案2】：

是的。常见的auto-complete plugin 会这样做 - 查看“Multiple Birds (remote)”框，它会搜索第一列但显示更多数据：

function formatItem(row) {
    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
    return row[0].replace(/(<.+?>)/gi, ''); //removes html tags
}
$("#suggest4").autocomplete('search.php', {
    width: 300,
    multiple: true,
    matchContains: true,
    formatItem: formatItem,
    formatResult: formatResult
});

search.php?q=b的结果是：

大苦卤|Botaurus stellaris 小苦卤|小苦参美国卤水|Botaurus lentiginosus

【讨论】：

formatItem 和 formatResult 在自动完成集成到 jQuery UI 时被弃用。 _renderItem 和 _renderMenu 的使用方法见stackoverflow.com/questions/2744747/…
@scott.korin - 这是一个很好的观点，这个答案已经过时了。也许我稍后会更新它，或者至少添加评论。该问题的浏览量超过 2500 次：不算太多，但也不错。

【解决方案3】：

您好，使用下面的 URL 显示一列，但显示多列

http://jsfiddle.net/alforno/g4stL/

 $("#search").mcautocomplete({
 showHeader: true,

columns: [{
    name: 'City',
    width: '150px',
    valueField: 'name'
}, {
    name: 'State',
    width: '120px',
    valueField: 'adminName1'
}, {
    name: 'Country',
    width: '120px',
    valueField: 'countryName'  }],
    select: function (event, ui) {
    this.value = (ui.item ? ui.item.name : '');
    return false;
    },



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,
            username: "demo"
        },
        // 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);
        }
    });
} });

【讨论】：