一个搜索框的小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 ...

随机推荐

python刷LeetCode：9. 回文数
难度等级:简单题目描述: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121输出: true示例 2: 输入: -121输出: fa ...
ubuntu下面嘚一些常用基本命令
1)环境变量配置: 9 ~/.bashrcor ~/.bash_profile. sudo gedit ~/.bashrc 第一种sudo vim ~/.bashrc export PYTHONPAT ...
读书笔记 - js高级程序设计 - 第五章引用类型
引用类型和类不是一个概念用typeof来检测属性是否存在 typeof args.name == "string" 需要实验访问属性的方法 .号和[] 一般情况下要 ...
数字证书原理(ssl,https)
https://blog.csdn.net/qq_34115899/article/details/81298284 关于私钥公钥数字签名数字证书.https.RSA的一些讲解 http://www. ...
Linux--Centos7开启关闭端口
参考 http://blog.csdn.net/u013410747/article/details/61696178 查看已开放的端口(默认不开放任何端口) firewall-cmd --li ...
基于python的arcgis底图添加（转）
本文翻译自:Qingkai‘s Blog 当使用python的Basemap库绘制地图时,选择一个漂亮的底图会为图片增色不少,但是使用map.bluemarble().map.etopo()或者map ...
python pandas写入excel文件
pandas读取.写入csv数据非常方便,但是有时希望通过excel画个简单的图表看一下数据质量.变化趋势并保存,这时候csv格式的数据就略显不便,因此尝试直接将数据写入excel文件. pandas ...
mysql数据库大规模数据读写并行时导致的锁表问题
问题介绍最近在给学校做的一个项目中,有一个功能涉及到考核分数问题. 我当时一想,这个问题并不是很难,于是就直接采用了这样的方法:拿着一个表中的数据作为索引,去挨个遍历相关表中的数据,最后经过算分的过 ...
Spring(一)——IOC和DI的简单理解
Spring是一个IOC(DI)和AOP容器框架,并且是开源的. 1.IOC和DI 比较官方的说法: •IOC(Inversion of Control):其思想是反转资源获取的方向. 传统的资源查找 ...
Spring framework体系架构
Spring3.x 图中将spring分为5个部分:core.aop.data access.web.test,图中每个圆角矩形都对应一个jar,如果在maven中配置,所有这些jar的"g ...

一个搜索框的小demo

一个搜索框的小demo的更多相关文章

随机推荐

热门专题