一个搜索框的小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 ...
随机推荐
- java后台读取excel模板数据
/** * 读取EXCEL模板数据 * * @param excelFilePath excel文件路径 * @param dataRowNum 开始读取数据的行数 * @param keyRowNu ...
- CF #610Div2 B2.K for the Price of One (Hard Version) (dp解法 && 贪心解法）
原题链接:http://codeforces.com/contest/1282/problem/B2题目大意:刚开始有 p 块钱,商店有 n 件物品,你每次可以只买一件付那一件的钱,也可以买 k 件只 ...
- Git 小课堂 002——别名
昨天我们聊了聊 Git 的文件存储,今天我们聊聊 Git 的别名.不知道你是不是熟悉别名,如果你经常使用命令行做一些事情,有一些复杂的命令,或者是一些简单的操作,往往用一些别名方法就很方便很容易,下面 ...
- delphi 文本 记录 流式 读写文件
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
- UVALive 4794 Sharing Chocolate DP
这道题目的DP思想挺先进的,用状态DP来表示各个子巧克力块.原本是要 dp(S,x,y),S代表状态,x,y为边长,由于y可以用面积/x表示出来,就压缩到了只有两个变量,在转移过程也是很巧妙,枚举S的 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： 变量提升
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Unix网络编程学习 < 一 >
#include "unp.h" int main(int argc , char**argv) { int sockfd , n; //sockfd套接字描述符 ]; struc ...
- UML-什么是GRASP？
1.定义 GRASP:General Responsibility Assignment Software Pattern,即通用职责分配软件模式,使用职责进行OO设计的学习工具. 2.本书目标 1) ...
- try{}catch{}finally{}使用总结
import java.util.Scanner; class MyException extends Exception { public MyException(String Message) { ...
- vue整合外部js
vue引入外部jsimport { TrackLine } from "../../../../../static/js/trajectory.js";import { initM ...