一个搜索框的小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 ...
随机推荐
- 「黑科技」智能消毒防疫机器人 技术方案介绍-disinfection robot
消毒机器人 小新防疫消杀机器人 - 自主导航全方位360°臭氧杀菌消毒机器人,采用臭氧无阻碍.无死角.遍布整个空间除菌:强力涡轮风机,30㎡室内空气循环6次/h,10分钟速效杀菌.除异味.自动转化为氧 ...
- VBA单元格自适应高亮操作
1.单元格所在行和列高亮 第一种方式 Private Sub worksheet_selectionchange(ByVal target As Range) Cells.Interior.Color ...
- Webstorm、Idea双击shift弹出框解决办法
1.Ctrl + Shift + A,输入registry 2.在弹出的记录表中,向下滚动到**“ide.suppress.double.click.handler”**并选中复选框,然后close关 ...
- Momentum
11.6 Momentum 在 Section 11.4 中,我们提到,目标函数有关自变量的梯度代表了目标函数在自变量当前位置下降最快的方向.因此,梯度下降也叫作最陡下降(steepest desce ...
- 操作uwsgi命令
uwsgi -i 你的目录/uwsgi.ini & 后台开启uwsgi pkill -f uwsgi 重启uwsgi
- Linux 系统查看服务器SN序列号以及服务器型号
1.单独查看服务器的序列号 [root@localhost ~]# dmidecode -t system | grep 'Serial Number' Serial Number: 2102310Y ...
- python学习笔记-函数与可变长参数
一.函数 1. def test(x): y=x+1 return yprint(test) #这是打印函数在内存中的地址 过程:就是没有返回值的函数 在python中过程也是函数,就算没哟返回值,也 ...
- Salt常用命令二
############################模块############################ 查看模块列表——module salt ‘minion’ sys.list_mo ...
- SaltStack中状态间关系unless、onlyif、require、require_in、watch、watch_in
1.unless 检查的命令,仅当unless选项指向的命令返回值为false时才执行name定义的命令 cmd.run: {% "] %} - name: 'nohup sh /alida ...
- 面向对象 part7 class
类的定义 类实际上是个“特殊的函数“,就像能够定义函数表达式和函数声明一样,类语法 有两个组成部分:类表达式和类声明式 类声明 类声明没有提升 静态方法 只有构造函数名可以调用,实例无法使用.常用于应 ...