一个搜索框的小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 ...
随机推荐
- Zxing和QR Code生成和解析二维码
本文是学习慕课网课程<Java生成二维码>(http://www.imooc.com/learn/531)的笔记. 一.二维码的分类 线性堆叠式二维码.矩阵式二维码.邮政码. 二.二维码的 ...
- 【每日Scrum】第六天冲刺
一.计划会议内容 数据库仍然有问题,决定先绕过数据库,进行软件内容设计与界面ui美化. 二.任务看板 三.scrum讨论照片 四.产品的状态 无 五.任务燃尽图
- Android如何用一个TextView显示不同颜色得字符
最近做一个项目,需要一个字符串显示不同的颜色.当时直接想到的就是用多个TextView来拼接,但是如果字符数量多的话,这样写是非常麻烦得.而且还要增加很多控件. 后来发现一个非常方便得方法.直接看代码 ...
- UVA 12663 第九届省赛 高桥与低桥 线段树
题意很简单,n个桥的高度是事先给出来的,然后有m次涨水与落水的高度,问有多少座桥在这m次涨落之后 被淹超过了k次,如果某桥本身被水淹了,此时再涨水,就不能算多淹一次 看下数据10的五次方,10的五次方 ...
- mysql自关联和多表连接查询
自关联操作 多表连接查询 inner join 内查询 left join 左查询 right join 右查询 ...
- Vmotion迁移要求
- linux 下实用工具
gpm 让linux 纯字符终端具备窗口模式下的鼠标功能 xterm + tmux 支持横向或者纵向切屏的终端 urxvt-unicode 支持中文的终端
- 使用sklearn做特征工程
1 特征工程是什么? 有这么一句话在业界广泛流传:数据和特征决定了机器学习的上限,而模型和算法只是逼近这个上限而已.那特征工程到底是什么呢?顾名思义,其本质是一项工程活动,目的是最大限度地从原始数据中 ...
- Hibernate(三)--关联映射
1.多对一 product----category category.hbm.xml <?xml version="1.0"?> <!DOCTYPE hibern ...
- php 查看接口运行时间
代码如何: <?php $start_time = microtime(true); for ($i=0;$i<100000000;$i++){}; $end_time = microti ...