有时侯我们在做自动完成时为了从多字段去检索，往往会发起个ajax请求让服务端去实现。对于这种数据集固定不变的数据源这种做法显然给服务器增加了不少请求。
实际上jqueryui autocomplete 控件已经帮用户考虑好了这有方面需求，我们只要给source属于实现个自定义的函数即可做到。原理请查看相关文档，和以往一样我就直接上示例代码喽！
$(function () {
var cities = [
{ thrC: "SHA", initial: "sh", en: "shanghai", zh_CN: "上海" },
{ thrC: "BJS", initial: "bj", en: "beijing", zh_CN: "北京" },
{ thrC: "LON", initial: "ld", en: "london", zh_CN: "伦敦" },
{ thrC: "PAR", initial: "bl", en: "paris", zh_CN: "巴黎" },
{ thrC: "NYC", initial: "ny", en: "new york", zh_CN: "纽约" },
{ thrC: "LAX", initial: "lsj", en: "los angeles", zh_CN: "洛杉矶" },
],
dialg = $('#dialog');
$("#tags").autocomplete({
autoFocuus: true,
source: function (req, res) {
var city = req.term,
result = [];
if (city) {
var searchResult = $.map(
(city ? $.grep(cities, function (value) {
return value.initial.toString().indexOf(city) == 0 ||
value.en.indexOf(city) == 0 ||
value.zh_CN.indexOf(city) == 0 ||
value.thrC.indexOf(city) == 0;
}) : cities),
function (value) {
return { label: value.zh_CN + "(" + value.thrC + ")", tc: value.thrC };
});
result = result.concat($.makeArray(searchResult));
}
res(result);
},
select: function (event, ui) {
$('#from_city').val(ui.item.tc);
}
});
});
var cities = [
{ thrC: "SHA", initial: "sh", en: "shanghai", zh_CN: "上海" },
{ thrC: "BJS", initial: "bj", en: "beijing", zh_CN: "北京" },
{ thrC: "LON", initial: "ld", en: "london", zh_CN: "伦敦" },
{ thrC: "PAR", initial: "bl", en: "paris", zh_CN: "巴黎" },
{ thrC: "NYC", initial: "ny", en: "new york", zh_CN: "纽约" },
{ thrC: "LAX", initial: "lsj", en: "los angeles", zh_CN: "洛杉矶" },
],
dialg = $('#dialog');
$("#tags").autocomplete({
autoFocuus: true,
source: function (req, res) {
var city = req.term,
result = [];
if (city) {
var searchResult = $.map(
(city ? $.grep(cities, function (value) {
return value.initial.toString().indexOf(city) == 0 ||
value.en.indexOf(city) == 0 ||
value.zh_CN.indexOf(city) == 0 ||
value.thrC.indexOf(city) == 0;
}) : cities),
function (value) {
return { label: value.zh_CN + "(" + value.thrC + ")", tc: value.thrC };
});
result = result.concat($.makeArray(searchResult));
}
res(result);
},
select: function (event, ui) {
$('#from_city').val(ui.item.tc);
}
});
});
<body>
<input type="text" name="fromCity" id="tags" />
<input type="hidden" name="from_city" id="from_city" />
</body>
<input type="text" name="fromCity" id="tags" />
<input type="hidden" name="from_city" id="from_city" />
</body>