JavaScript 制作百度输入预测功能
示例
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>#box {width: 450px;margin: 200px auto;}#txt {width: 350px;}#pop {width: 350px;border: 1px solid red;}#pop ul {margin: 10px;padding: 0px;width: 200px;list-style-type: none;}#pop ul li {}</style>
</head>
<body>
<div id="box"><input type="text" id="txt" value=""><input type="button" value="百度一下" id="btn">
</div>
<script src="common.js"></script>
<script>var keyWords = ["小杨最纯洁", "小杨一点也不追名逐利", "小李是大家的", "小快好快", "华为这一波很6", "花儿笑了", "苹果禁用微信，用户纷纷下载QQ"];// 获取文本框注册键盘抬起事件my$("txt").onkeyup = function () {// 每一次的键盘抬起都判断页面中有没有这个divif (my$("dv")) {// 有就删除my$("box").removeChild(my$("dv"));}// 获取文本输入的内容var text = this.value;// 创建临时数组来存放对应上的数据var tempArr = [];for (var i = 0; i < keyWords.length; i++) {// 判断是否是最开始出现的if (keyWords[i].indexOf(text) == 0) {tempArr.push(keyWords[i]);//追加}}// 如果文本框是空的，临时数组是空的，则不用创建divif (this.value.length == 0 || tempArr.length == 0) {//如果页面中有这个div,删除这个divif (my$("dv")) {my$("box").removeChild(my$("dv"));}return;}// 创建div，把div加入到box中的div中var dvObj = document.createElement("div");my$("box").appendChild(dvObj);dvObj.id = "dv";dvObj.style.width = "350px";dvObj.style.border = "1px solid green";//循环遍历临时数组,创建对应的p标签for (var i = 0; i < tempArr.length; i++) {// 创建p标签var pObj = document.createElement("p");// 把p加到div中dvObj.appendChild(pObj);setInnerText(pObj, tempArr[i]);pObj.style.margin = 0;pObj.style.padding = 0;pObj.style.cursor = "pointer";pObj.style.marginTop = "5px";pObj.style.marginLeft = "5px";// 添加鼠标进入事件pObj.onmouseover = function () {this.style.backgroundColor = "yellow";}//鼠标离开pObj.onmouseout = function () {this.style.backgroundColor = "";};}}
</script>
</body>
</html>
JavaScript 制作百度输入预测功能相关推荐
- python 在软件自己自动输入-Python模拟百度自动输入搜索功能的实例
如下所示: # 访问百度,模拟自动输入搜索 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要 ...
- 【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能 效果图: 完整代码: <!DOCTYPE ...
- 万字长文保姆级教你制作自己的多功能QQ机器人
转载请注明出处:小锋学长生活大爆炸(https://xfxuezhang.blog.csdn.net/) 若发现存在部分图片缺失,可以访问原文:万字长文保姆级教你制作自己的多功能QQ机器人 - 小锋学 ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
- 《财富》500 强企业要求 curl 开源工具作者提供免费及时的支持；基于Chromium的Edge浏览器正在整合文本预测功能 | 开源日报
整理 | 宋彤彤 责编 | 屠敏 开源吞噬世界的趋势下,借助开源软件,基于开源协议,任何人都可以得到项目的源代码,加以学习.修改,甚至是重新分发.关注「开源日报」,一文速览国内外今日的开源大事件吧! ...
- 如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- 怎么制作百度百科简介，创建自己的百度百科怎么弄
很多人想要为自己创建一个百度百科词条但是却不知道怎么弄,下面洛希爱做百科网为大家介绍怎么制作百度百科简介. 创建百科的流程和规定: 首先是注册百度百科账号 仅有申请注册了百度帐号,才可以在百科里边开展 ...
- 给你30秒的时间，你会用Excel制作出一个抽奖功能吗？
一说到抽奖,大家都是想到最近的"支付宝锦鲤信小呆",但是今天跟大家谈论的不是这个,而是:你会用Excel制作抽奖功能吗?可能大家都不知道Excel有这么多的神技能,但是你不知道的还 ...
- WPF制作的一个小功能,智能提示(IntelliSense)
WPF制作的一个小功能,智能提示(IntelliSense) 原文 http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近 ...
最新文章
- df命令、du命令、磁盘分区（fdisk命令）
- TensorFlow MNIST最佳实践
- OpenCV YOLO DNN(yolo_object_detection)
- Value Investment
- python singleton design pattern super() 多继承
- 修改JAVA代码，需要重启Tomcat的原因
- python计算绩效工资_python实现 --工资管理系统
- 如何获取网页付费隐藏链接_如何将SEO变成可衡量的收入来源
- 网络集成方案_用户需要的综合性解决方案：网络安全架构集成的价值凸显
- java 访问iis异常_在IIS中部署应用程序时无法访问Active Directory
- 微软易升级服务器,通过“微软Windows10易升”升级Win10 1803全程图解
- 基于Java的线上诊疗系统毕业设计源码1617411
- 【朝花夕拾】Android自定义View篇之（十）移动阈值TouchSlop及滑动追踪VelocityTracker...
- Discuz手机模板:NVBING5-APP手机版
- 抖音商家发货超时处罚规则，特殊情况及申诉要求是什么丨国仁猫哥
- 对讲机模块场景分析之一：无线语音透传
- (zt)武林外传的经典台词系列2
- 手机端html5触屏事件(touch事件)3
- 一般腻子（普通腻子）和耐水腻子的区别
- GitHub给老照片上色项目曝光： 用AI修复母亲的旧照片