这里使用select实现,之后会更新使用ul和li实现的代码
效果如下:
代码(部分核心代码):
var data = [
{'data': '1122334'},
{'data': '122334'},
{'data': '1122334'},
{'data': '11565334'},
{'data': '113422345'},
{'data': '1234'},
{'data': '4521'},
{'data': '27736211'},
{'data': '832113124223'},
{'data': '中国'},
{'data': '中国地理'},
{'data': '中国地理位置'},
];
var ckList;
$(function () {
ckList = getCfCkMcList("");
data = searchData(data, '', true);
var f = false;
$('.searchNotice').hover(function () {
f = true;
}, function () {
f = false;
});
$('.searchNotice').click(function () {
$('#searchInfo').val($(this).val());
$(this).hide();
});
$('#searchInfo').blur(function () {
/*setTimeout(function () {
$('.searchNotice').hide();
}, 100);*/
if (!f) {
$('.searchNotice').hide();
}
});
});
/**
* 搜索框智能提示
* @returns
*/
function notice () {
var max = 20;
var res = {
'list': []
};
var info = $('#searchInfo').val().trim();
if (info != null || info != "") {
if (info.length >= 1) {
data = searchData(data, info, false);
var t = 0;
for(var i = 0; i < data.length; i++) {
if (t >= max) {
break;
}
if (data[i].data.indexOf(info) > -1) {
t++;
var temp = {
'order': data[i].data.indexOf(info),
'content': data[i].data,
}
res.list.push(temp);
}
}
res.list.sort(function (a, b) {
return a.order - b.order;
});
$('.searchNotice').empty();
if (res.list == null || res.list.length == 0) {
$('.searchNotice').empty().hide();
return;
}
$.each(res.list, function (i, e) {
$('.searchNotice')
.append('<option title="' + e.content + '">' + e.content + '</option>')
});
$('.searchNotice').show();
}
if (info.length < 1) {
$('.searchNotice').empty().hide();
}
} else {
$('.searchNotice').empty().hide();
}
}
var flag;
function searchData(data, info, first) {
if (flag == info) {
return data;
} else {
flag = info;
}
var phList, jgdwList;
data = [];
if (first == true) {
phList = loadMhPhList("65");
jgdwList = loadJgdwMcList("新疆");
} else {
if (/^\d*$/.test(info)) {
phList = loadMhPhList(info);
} else {
jgdwList = loadJgdwMcList(info);
}
}
if (phList != null) {
data = addData(data, phList);
}
data = addData(data, ckList);
if (jgdwList != null) {
data = addData(data, jgdwList);
}
return data;
}
function addData(data, source) {
for (var i = 0; i < source.length; i++) {
data.push(source[i]);
}
return data;
}