一、实时按照输入的搜索值显示与其匹配的内容，隐藏其它内容

<%@ 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的更多相关文章

  1. Mybatis mysql 一个搜索框多个字段模糊查询 几种方法

    第一种 or 根据搜索框给定的关键词,模糊搜索用户名和账号都匹配的用户集合 <select id="list" parameterType="com.user.Us ...

  2. Swift基础之实现一个镂空图片的小Demo

    前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏 首先,需要创建导航视图,然后创建两种展示方式的按钮 let vc = ViewContro ...

  3. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  4. iOS：自己写的一个星级评价的小Demo

    重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a ...

  5. 一个基于node 的小demo

    首先我们新建一个文件夹  demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...

  6. 一个JNI的helloworld小demo

    最近想学习一下jni,在网上看了一些demo,自己也操作了一遍,首先我将我自己学习的demo网站贴出来:https://blog.csdn.net/lwcloud/article/details/78 ...

  7. SpringMVC-拦截器做一个登录认证的小Demo

    拦截器 拦截器的定义 处理器拦截器类似于servlet开发中的filter,用于对处理器进行预处理和后处理. 定义拦截器,实现HandlerInterceptor这个接口 接口的实现需要导入包impo ...

  8. 如何在html添加一个搜索框和一个按钮？

    <INPUT TYPE="text" id="k"><INPUT TYPE="button" VALUE="ok ...

  9. Mybatis 一个搜索框对多个字段进行模糊查询

    <select id="list" parameterType="ParamConfigCondition" resultType="Param ...

随机推荐

  1. 【转】pip升级不成功怎么办

    python -m pip install --upgrade pip -i https://pypi.douban.com/simple

  2. GIT 操作文档

    https://git-scm.com/book/en/v2 安装git地址:https://git-scm.com/downloads 一.初始化设置 1.设置你用户名称与邮件地址(每一个 Git ...

  3. SpringCloud----服务注册中心Eureka

    Eureka是Netflix开源的一个RESTful服务,主要用于服务的注册发现.Eureka由两个组件组成:Eureka服务器和Eureka客户端.Eureka服务器用作服务注册服务器.Eureka ...

  4. MySQL读写分离如何实现？

    主要说下读写分离, 当我们的数据量很大时,数据库服务器的压力变大,这时候我们需要从架构方面来解决这一问题,在一个网站中读的操作很多,写的操作很少,这时候我们需要配置读写分离,把读操作和写操作分离出来, ...

  5. rust 使用国内镜像，快速安装方法

    前言 众所周知的,国内由于防火墙的原因,访问国外的网络比较慢. 如果直接按照rust官网的安装方式安装非常容易失败,即使不失败也非常非常慢 如果用国内的镜像则可以分分钟就搞定 官方安装方法 文档: h ...

  6. AI 领域与概述

    概述 数据分析行业主要的职业发展. 业务:业务分析师.数据产品经理.产品总监 技术:算法师.架构师.研发经理.研发总监 美工:BI工程师 人工智能,是数据分析的子集.人工智能主要包括 语音识别 自然语 ...

  7. python 网络请求、下载

    #获取qq群中的群成员qq号import requestsmembers = []url = 'https://qun.qq.com/cgi-bin/qun_mgr/search_group_memb ...

  8. 黑马程序员IDEA版JAVA基础班\JavaWeb部分视频\2-10Request和Response\第5节 request登录案例

    用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表 ...

  9. E - Two Arithmetic Progressions（CodeForces - 710D）（拓展中国剩余定理）

    You are given two arithmetic progressions: a1k + b1 and a2l + b2. Find the number of integers x such ...

  10. UML-类图-需要写关联名称吗？

    概念模型:需要写关联名称:类图:不需要写关联名称. 注意,概念模型关联线不需要箭头.