一个搜索框的小demo
一、实时按照输入的搜索值显示与其匹配的内容，隐藏其它内容
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="textSelect.aspx.cs" Inherits="textSelect" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>搜索框测试页面</title>
<script src="jquery/jquery-2.1.0.min.js"></script>
<script src="js/jquery.scrollto.js"></script>
<style type="text/css">
.search
{
position: relative;
margin-left:%;
margin-top:%;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: ;
color: #;
}
.list{
display:block;
font-size: 39px;
margin-top: 167px;
}
.search_text{
width: %;
height: 93px;
font-size: 34px;
border: 1px solid;
}
.all{
position: absolute;
margin-top: 56px;
}
</style> </head>
<body>
<div class="search">
<input type="text" id="search_text" class="search_text" placeholder="查询人员" />
<div id="listall" class="all">
<div id="none" style="display:none;font-size: 39px;">查无此人</div>
<div class="list">
汪宝蛋
</div>
<div class="list">
禽兽宝宝蛋
</div>
<div class="list">
小明
</div>
<div class="list">
小黑
</div>
<div class="list">
李大头
</div>
<div class="list">
宝宝蛋
</div>
<div class="list">
隔壁老王
</div>
<div class="list">
缺心眼
</div>
<div class="list">
gg
</div>
<div class="list">
xs
</div>
<div class="list">
sb
</div>
<div class="list">
www
</div>
</div>
</div>
<script type="text/javascript"> $("#search_text").bind('input propertychange',function(){ //实时监听输入框的改动
$("#none").css("display", "none");
var searchText = $(this).val();//获取输入的搜索内容
var $searchLi = "";//预备对象，用于存储匹配出的li
if (searchText != "") {
$("#listall").children(".list").each(function () { //遍历列表
console.log(this);
console.log($(this).html())
console.log(searchText.replace(/\"/g, "")) //去除searchText的双引号
if ($.trim($(this).html()) == searchText.replace(/\"/g, "")) //去除$(this).html()空格，判断这个值是否等于输入的值
{
$(this).css("display", "block");
$searchLi += searchText.replace(/\"/g, "")
}
else {
$(this).css("display", "none");
}
})
//判断搜索内容是否有效，若无效，输出not find
if ($searchLi.length <= ) {
$("#listall").children(".list").css("display", "none");
$("#none").css("display", "block");
}
}
else {
$("#listall").children(".list").css("display", "block");
$("#none").css("display", "none");
}
})
</script>
</body>
</html>
二、实现搜索后定位到与其匹配的内容位置
只需要把下面这段js替代上面的js就可以啦
$("#search_text").blur( function () { //实时监听输入框的改动
$("#none").css("display", "none");
var searchText = $(this).val();//获取输入的搜索内容
var $searchLi = "";//预备对象，用于存储匹配出的li
if (searchText != "") {
$("#listall").children(".list").each(function () { //遍历列表
console.log(searchText.replace(/\"/g, "")) //去除searchText的双引号
if ($.trim($(this).html()) == searchText.replace(/\"/g, "")) //去除$(this).html()空格，判断这个值是否等于输入的值
{
$(document).scrollTop($(this).offset().top)
$searchLi += searchText.replace(/\"/g, "")
}
else {
}
})
//判断搜索内容是否有效，若无效，输出not find
if ($searchLi.length <= ) {
$("#listall").children(".list").css("display", "none");
$("#none").css("display", "block");
}
}
else {
$("#listall").children(".list").css("display", "block");
$("#none").css("display", "none");
}
})
一个搜索框的小demo的更多相关文章
- Mybatis mysql 一个搜索框多个字段模糊查询 几种方法
第一种 or 根据搜索框给定的关键词,模糊搜索用户名和账号都匹配的用户集合 <select id="list" parameterType="com.user.Us ...
- Swift基础之实现一个镂空图片的小Demo
前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏 首先,需要创建导航视图,然后创建两种展示方式的按钮 let vc = ViewContro ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- iOS：自己写的一个星级评价的小Demo
重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a ...
- 一个基于node 的小demo
首先我们新建一个文件夹 demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...
- 一个JNI的helloworld小demo
最近想学习一下jni,在网上看了一些demo,自己也操作了一遍,首先我将我自己学习的demo网站贴出来:https://blog.csdn.net/lwcloud/article/details/78 ...
- SpringMVC-拦截器做一个登录认证的小Demo
拦截器 拦截器的定义 处理器拦截器类似于servlet开发中的filter,用于对处理器进行预处理和后处理. 定义拦截器,实现HandlerInterceptor这个接口 接口的实现需要导入包impo ...
- 如何在html添加一个搜索框和一个按钮？
<INPUT TYPE="text" id="k"><INPUT TYPE="button" VALUE="ok ...
- Mybatis 一个搜索框对多个字段进行模糊查询
<select id="list" parameterType="ParamConfigCondition" resultType="Param ...
随机推荐
- POJ - 3977 Subset（二分+折半枚举）
题意:有一个N(N <= 35)个数的集合,每个数的绝对值小于等于1015,找一个非空子集,使该子集中所有元素的和的绝对值最小,若有多个,则输出个数最小的那个. 分析: 1.将集合中的元素分成两 ...
- 51nod 1267：4个数和为0 哈希
1267 4个数和为0 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 给出N个整数,你来判断一下是否能够选出4个数,他们的和为0,可以则输出&qu ...
- c 转二进制
int nData = 1568;//转二进制 for (int i = sizeof(int) * 8 - 1; i >= 0; i--){ if ((nData >>i) &am ...
- MFC下的网络编程（1）CAsyncSocket进行无连接（UDP）通信
服务器端发送数据给客户端 先看服务器端: CAsyncSocket m_sockSend; //声明一个Socket对象 点击发送数据后,执行下面这些动作 ...
- 18 12 14 python提高 装饰器
---恢复内容开始--- 装饰器还真的有些没看懂 一个任意传参的装饰器 一个通用装饰器 def set_func(func): print("------开始进行装饰") # ...
- Win10教育版VL版kms密钥激活
1.右键开始图标,或者win+x,选择Windows PowerShell(管理员): 2.依次执行下面的命令,分别表示安装win10教育版密钥,设置kms服务器,激活win10教育版: slmgr ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL 处理重复数据
有些 MySQL 数据表中可能存在重复的记录,有些情况允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 防止表中出现重复数据 可以在 MySQL 数据表中设置指定的字段为 PRIMARY K ...
- MySQL--数据导入
参考:http://blog.csdn.net/jyb2014/article/details/39294879?locationNum=13 可导入大文件. source 导入总是失败.
- 苹果智能AR挡风玻璃靠谱吗？
在过去十年,外界给苹果的形象一直是"伟大的硬件公司",他们的产品在外观方面往往比内涵更加引人注目,兼具娱乐性和艺术性, iPhone/iPad/iPod莫不如此,所以,当坊间传闻苹 ...
- 查路由途径 traceroute tracert
linux 用 traceroute IP windows用 tracert IP 虚拟机下使用无效