公告:欢迎访问,查看更多资源请点我^.^!            点我关闭广告
输入框智能提示(一)
2017-07-19 10:54:16
2005人阅读
评论(4)
分类:前端


这里使用select实现,之后会更新使用ul和li实现的代码

效果如下:

blob.png

代码(部分核心代码):

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



分享一下:
赞一下(7)
博主资料
博主头像
zc521106
文章:34
浏览:19899
文章分类
Java(12)
NoSql(112)
数据库(12)
前端(12)
阅读排行
Java基础知识
(12)
NoSql应用
(112)
数据库Oracle语法
(12)
前端常用工具类
(12)
java web项目
(12)
linux安装mysql
(12)
评论区
这篇文章怎么样?写点评论吧!
姓名:
邮箱:
有回复时通知我:
发表
回复【10.20.30.32】:
使用ul和li实现的版本:http://zhaochao.top/iBlog/article.html?id=105
2017-10-11 08:36:27
使用ul和li实现的版本:http://zhaochao.top/iBlog/article.html?id=105
2017-09-04 15:30:25
嗯嗯
2017-08-03 11:19:01
iBlog正式版上线就会更新使用ul和li的代码,美观度和实用性比这个高很多。
2017-08-01 22:25:23
* 以上用户言论只代表其个人观点,不代表iBlog网站的观点或立场,如有任何疑问请随时联系管理员...