JavaScript--模拟百度搜索下拉li
上效果:
主要思路:
函数indexOf() 、join()、innerHTML的使用,还有 用完的数组要清空
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 20px;
}
.box {
width: 600px;
height: 40px;
margin: 200px auto;
position: relative;
}
#txt {
width: 488px;
height: 38px;
border: 1px solid #3385ff;
font-size: 20px;
float: left;
outline: none;
padding-left: 10px;
}
#search {
width: 100px;
height: 40px;
float: left;
border:0 none;
background-color: #3385ff;
color:#fff;
cursor: pointer;
}
#keywords {
position: absolute;
top: 40px;
left: 0;
background-color: rgb(12, 255, 24);
list-style: none;
width: 500px;;
}
li {
line-height: 24px;
}
</style>
</head>
<body>
<div class="box">
<div class="baidu">
<input type="text" id="txt"/>
<input type="button" value="百度一下" id="search"/>
</div>
<ul id="keywords"></ul>
</div>
<script> // 这里是模拟我们的数据库
var keywords = ["冬天吃什么","冬天的离别","冬天有多冷","林丹林丹","林丹夺冠","123","123456","JavaScript","Java","黄鳝","黄鳝煮汤","黄鳝煮粥","咸鱼","咸鱼茄子煲","咸鱼翻身","十九大","十八大","十全十美"];
var txt = document.getElementById('txt');
var search = document.getElementById('search');
var ul = document.getElementById('keywords'); txt.onkeyup = function () {
// 取出目前输入的关键字
var txtValue = txt.value.trim(); //存储与当前关键字相关的字符串信息的数组
var aimArr = [];
for(var i = 0 ; i < keywords.length ; i++ ) {
// keywords数组中的字符串是否含义该关键字,含有的话存储进aimArr
if(keywords[i].indexOf(txtValue) != -1) { // 没有返回-1
aimArr.push(keywords[i]);
}
}
// 如果输入为空
if (txtValue.length == 0 ) {
aimArr = [];
} // 把aimArr设置进ul中js动态添加的li里面
// 创建li
var lis = []; // 新创建的li存储在lis数组里面
for(var i = 0 ; i < aimArr.length ; i++ ) {
lis.push("<li>"+aimArr[i]+"</li>");
}
// 把lis数组转为字符串,添加进ul中
ul.innerHTML = lis.join(""); } </script>
</body>
</html>
JavaScript--模拟百度搜索下拉li的更多相关文章
- vue实现百度搜索下拉提示功能
这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang=" ...
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- 利用 lucene.net 实现高效率的 WildcardQuery ,记一次类似百度搜索下拉关键字联想功能的实现。
打开百度输入 站内搜索也要实现类似功能.最基础的做法,写个方法查数据库搜索历史综合表keywordSearch(先将被搜索过的关键字记录到一张表,记录好他们被搜索的次数.上次搜索的有多少结果) 大概 ...
- z-blog博客组插件openSug.js百度搜索下拉框提示代码
z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...
- JavaScript实现百度搜索页面
JavaScript实现百度搜索页面 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- python--selenium简单模拟百度搜索点击器
python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...
- JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Splinter学习--初探1,模拟百度搜索
Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...
随机推荐
- java后台使用HttpURLConnection实现百度主动推送
优点是快 不需要页面执行,,发布文章之后立即推送,所以,不管有没有人访问,都可以自动实时推送 尝试了一下httpclient,没找到相关资料,post方式无法塞url进去 最后改为 import ja ...
- Django项目: 5.新闻主页
一.功能需求分析 1.功能 轮播图 推荐文章列表 文章标签导航 文章列表 分页 二.模型设计 根据功能分析,我们需要如下表 1.表和字段分析 文章分类表 文章表 文章评论表 推荐文章表 轮播图表 2. ...
- Scrapy下载中间件的优先级(神踏马值越小优先级越高)
自从之前看的一篇讲Scrapy下载中间件的文章后,一直认为设置里下载中间件的优先级数值越小,越优先,最近要抓的网站反爬增强了,所以需要使用代理ip,但是由于使用的是免费代理以至于经常失效,需要对失效的 ...
- MFC 双缓存绘图
在SDI应用程序中,当我们需要时刻动态刷新界面的时候,如果我们一直使用,UpdateAllView()那么就会出现屏幕不停闪烁.闪屏非常严重,特别是一直在动态刷新的时候.并且在闪屏的过程中 我们根本就 ...
- 告别诊断烦恼 | 应用实时监控 ARMS 上线智能和实时诊断功能
为什么要做这个功能? 作为一款应用性能监控产品,我们通常会给用户展示两类数据: 第一种是统计数据:用户通过使用统计数据设置报警(比如应用响应时间大于2s),缩小问题范围(比如报警时间范围内,是哪一个接 ...
- Python之常用文件操作
Python之常用文件操作
- css上下左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux定时跑php脚本,防止重复跑,死循环
$PHP_SELF = realpath($_SERVER['PHP_SELF']); if (!($argc > 1)) { $lock_file = $PHP_SELF . '.lock'; ...
- 解决Cesium1.50对gltf2.0/3dtiles数据读取的问题
问题说明 Cesium 1.50(2018/10/01)版本打开3dtiles可能会出现加载不上导致渲染停止的错误. 错误说明为:RuntimeError: Unsupported glTF Exte ...
- Leetcode16.3Sum Closest最接近的三数之和
给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数 ...