一个搜索框的小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 ...
随机推荐
- 如何利用vue脚手架创建一个vue项目
1.安装node.js 2.打开命令行查看下npm和node是否都安装好 node -v npm -v 3.安装淘宝镜像cnpm $ npm install -g cnpm --registry=ht ...
- 【php】Swoole之php高性能通信框架
Swoole介绍 swoole是由c语言开发的异步网络通信引擎,被编译为so文件(swoole.so)作为php的extesion扩展. 与其他普通扩展不同: 与普通的扩展不同的是普通的扩展只是提供一 ...
- 十六、matplotlib统计图
'''Matplotlib 是一个Python的 2D绘图库.通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等.通过学习Matplotli ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL NULL 值处理
MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. 为了处理这种情况,MySQL提供了三大运算符 ...
- 白痴级教程，新手看过来，具详细实操文档 （word图片复制不过来，0202年了还有这样的不便利，下回研究一下，图片下次补）
一.环境配置(win10): 1.配置cmd的python环境为arcmap10.2 自带的python解释器(2.7.3)(自带arcpy库) 具体操作: 1我的电脑右击属性,打开 (选中path点 ...
- MVC——EF 回顾总结
回顾一下MVC的知识点. 其实开始 我在学校的知识对MVC 还是很模糊的一个概念.只是记得结合EasyUI 增删改查 和分页,代码都是模糊的 进过这段时间的学习,让我对MVC 有了一个很清楚的认识. ...
- Vue.js——5.生命周期
Vue的生命周期 创建阶段new Vue1,beforeCreate() 表示在实例没有被创建出来之前会执行它加载data和methods2,caeated() data 和methods被初始化了 ...
- go语言实现leetcode-242
package main import ( "fmt" "reflect" ) func isAnagram(s string, t string) bool ...
- Linux文件目录常用命令
查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 >& ...
- js实现placehoider效果
placeholder作为input输入框提示语很好用,但是低版本ie却不支持,对于只有提示语的输入框并不适用 <input type="text" value=" ...