JS实现搜索关键词的智能提示功能


Posted in Javascript onJuly 07, 2017

最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示

比如 我输入杨字,他会给我提示以下搜索提示

JS实现搜索关键词的智能提示功能

我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
onload = function () {
function handle() {
var keyWords = { 
"杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],
"杨": ["杨利伟", "杨振宇", "杨过"],
"杨忠": ["杨忠科", "杨忠学", "杨忠爱国"],
"杨忠科爱":["杨忠科爱祖国","杨忠科爱首都","杨忠科爱学习"]
};
if (keyWords[this.value]) {
//判断body中是否有这个层,如果有就删掉了
if (document.getElementById('dv')) {
document.body.removeChild(document.getElementById('dv'));
}
//开始创建层
var dvObj = document.createElement('div');
dvObj.id = 'dv';
dvObj.style.width = '300px';
//dvObj.style.height = '200px'; //将来可以不要
dvObj.style.border = '1px solid red';
document.body.appendChild(dvObj);
//脱离文档流
dvObj.style.position = 'absolute';
dvObj.style.left = this.offsetLeft + 'px';
dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
//循环创建
for (var i = 0; i < keyWords[this.value].length; i++) {
//创建一个可以存文本的标签
var pObj = document.createElement('p');
pObj.innerText = keyWords[this.value][i];
//p标签要有小手,还有高亮显示
pObj.style.cursor = 'pointer';
pObj.style.margin = '5px';
pObj.onmouseover = function () {
this.style.backgroundColor = 'red';
};
pObj.onmouseout = function () {
this.style.backgroundColor = '';
}
dvObj.appendChild(pObj); //把p标签加到层中
}
//创建可以显示文件的标签
}
}
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。 
if (/msie/i.test(navigator.userAgent)) //ie浏览器 
{
document.getElementById('txt').onpropertychange = handle
}
else {//非ie浏览器,比如Firefox 
document.getElementById('txt').addEventListener("input", handle, false);
}
}; 
</script>
</head>
<body>
<span id="msg"></span>
请输入搜索关键字<input type="text" name="name" value="" style="width:300px;height:30px;font-size:25px; border:1px solid green" id="txt"/>百度一下
</body>
</html>

效果展示:

JS实现搜索关键词的智能提示功能

关于这个练习我有以下几点思索

1.因为搜索热词提前被设定好,放在键值对里面,所以搜索的范围也就被限定了,这个可以再被加深,和数据库中的数据连接起来,搜索的的关键词直接从数据库中查询,这个具体怎么写我还没研究透,希望有经验的前辈可以指教。

2.关于这个代码的应用我觉得可以应用在用户查询搜索上,百度搜索就是一个很好的实例

3.代码毕竟是JS写的,如果用户的电脑将JS控件阻止了,效果也就不行了。

以上所述是小编给大家介绍的JS实现搜索关键词的智能提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS动态日期时间的获取方法
Sep 28 Javascript
js密码强度检测
Jan 07 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
Node.js Buffer用法解读
May 18 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
You might like
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP微信分享开发详解
2017/01/14 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery 笔记 事件
2011/11/02 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
python解析xml文件实例分享
2013/12/04 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
浅谈Python 递归算法指归
2019/08/22 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
天网面试题
2013/04/07 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
会议开场欢迎词
2014/01/15 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
保护黄河倡议书
2014/05/16 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书