Multi-column Autocomplete for jQuery?

Question

Is there an AJAX autocomplete for jQuery that supports multiple columns? I mean multiple columns like a database table, not just splitting a list up. It would search off the first column, but the rest would be visible in the dropdown.

Does such a thing exist?

score 2 · Answer 1 · answered Oct 31 '12 at 13:27

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
        }

score 0 · Accepted Answer · answered Apr 15 '10 at 22:05

0

Yes. The common auto-complete plugin does that - look at the "Multiple Birds (remote)" box, it searches for the first column but displays more data:

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
});

The result of search.php?q=b is:

Great <em>Bittern</em>|Botaurus stellaris
Little Bittern|Ixobrychus minutus
American Bittern|Botaurus lentiginosus

answered Apr 15 '10 at 22:05

Kobi

135,331
41
252
292

1

formatItem and formatResult were depricated when autocomplete was integrated into jQuery UI. See http://stackoverflow.com/questions/2744747/quick-example-of-multi-column-results-with-jqueryuis-new-autocomplete for how to use _renderItem and _renderMenu – scott.korin Jun 21 '12 at 13:24
@scott.korin - that is a good point, this answer is quite outdated. Maybe I'll update it later, or at least add a comment. The question has over 2500 views: not too many, but not bad. – Kobi Jun 21 '12 at 13:52

Cavin · Answer 3 · 2017-07-20T11:28:13.233

Hi use this below URL for one column but displaying multiple columns

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);
        }
    });
} });

Multi-column Autocomplete for jQuery?

3 Answers3