文档章节

搜索框键盘抬起事件1

o
 osc_1ee7cxmx
发布于 2018/08/06 15:21
字数 454
阅读 0
收藏 0

一.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Web/css/bootstrap.min.css">
<script src="Web/js/jquery-1.8.3.min.js"></script>
</head>
<style>
.search {
display: inline-flex;
height: 35px;
margin: 50px auto;
position: relative;
}
.search input {
border: #eee 1px solid;
background-color: #fff;
outline: none;
width: 200px;
padding: 0 5px;
}
.search button {
background-color: #ff3300;
color: #fff;
border: none;
width: 80px;
}
/*追加到.search的内容后面.然后设置CSS代码, 我们设置他的最小宽度为.search宽度减去搜索按钮的宽度.这样就跟搜索框一样宽.*/
.search ul {
list-style-type:none;
position: absolute;
left: 0;
top: 35px;
border: #eee 1px solid;
min-width: calc(100% - 80px);
text-align: left;
}
.search ul a {
display: block;
padding: 5px;
}
</style>
<body style="text-align: center;">

<div class="search">
<!--1.搜索框,搜索的点击按钮.-->
<input id="key" type="text" value="" placeholder="请输入需要搜索内容">
<button>搜索</button>

<!--2.下面词语列表-->
<ul id="datalist">
<li><a href="#">武林外传</a> </li>
<li><a href="#">葵花宝典</a> </li>
<li><a href="#">如来佛掌</a> </li>
<li><a href="#">九阴白骨爪</a> </li>
</ul>
</div>
</body>
<script>

//模拟数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {
//处理事件
var val = this.value;
//获取输入框里匹配的数据
var srdata = [];
for (var i = 0; i < data.length; i++) {

if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
srdata.push(data[i]);
}
}
//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示
var ele_datalist = document.getElementById("datalist");
ele_datalist.style.visibility = "visible";
ele_datalist.innerHTML = "";

if (srdata.length == 0) {
ele_datalist.style.visibility = "hidden";
}

//将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏
var self = this;
for (var i = 0; i < srdata.length; i++) {
var ele_li = document.createElement("li");
var ele_a = document.createElement("a");
ele_a.setAttribute("href", "javascript:;");
ele_a.textContent = srdata[i];

ele_a.onclick = function () {
self.value = this.textContent;
ele_datalist.style.visibility = "hidden";
}


ele_li.appendChild(ele_a);
ele_datalist.appendChild(ele_li);
}

}

</script>














</html>
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

VMware——在CentOS中安装VMware Tools

VMware——在CentOS中安装VMware Tools 摘要:本文主要记录了如何在VMware中的CentOS系统中,安装VMware Tools。 安装依赖 查看系统相关信息: 1 [root@localhost ~]# uname -r2 3.10.0-32...

osc_5h5udyht
18分钟前
5
0
SpringCache分布式缓存学习

Spring Cache 简介 Cache接口为缓存的组件规范定义,包含缓存的各种操作集合 Cache接口下Spring提供了各种xxcache的实现;如RedisCache,EhCacheCache,ConcurrentMapCache等; 每次调用需要缓...

osc_4dgu16li
20分钟前
7
0
Python全栈之Flask 简介

前言 Python Web框架里比较有名当属Django,Django功能全面,它提供一站式解决方案,集成了MVT(Model-View-Template)和ORM,以及后台管理。但是缺点也很明显,它偏重。就像是一个装潢好的房...

osc_15fvklrg
22分钟前
11
0
WEB攻击手段及防御第2篇-SQL注入

概念 SQL注入即通过WEB表单域插入非法SQL命令,当服务器端构造SQL时采用拼接形式,非法SQL与正常SQL一并构造并在数据库中执行。 简单的SQL注入的例子: 例1:test123456 or 1=1; 加上or 1=1,...

osc_4hct2n4z
22分钟前
5
0
java 反射机制 (获取父类泛型的类型)getGenericSuperclass

https://blog.csdn.net/jidetashuo/article/details/53538231

Java搬砖工程师
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部