Multi-column Autocomplete for jQuery?
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?
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
}
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
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);
}
});
} });
精彩评论