Multi column autocomplete for jQuery?

Question

Is there AJAX autocomplete for jQuery that supports multiple columns? I mean a few columns, such as a database table, and not just breaking the list up. It will search for the first column, but the rest will be visible in the drop-down list.

Is there such a thing?

Answer 1

Yes. The general autofill plugin does this - look at the "Several birds (remote)" field, it looks 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

Answer 2

 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 } 

Answer 3

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