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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
js友好的时间返回函数
Aug 24 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python线程、进程和协程详解
2016/07/19 Python
Python实现的计数排序算法示例
2017/11/29 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
客服文员岗位职责
2013/11/29 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
师德师风演讲稿
2014/05/05 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
微观世界观后感
2015/06/10 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL