一、实时按照输入的搜索值显示与其匹配的内容，隐藏其它内容
<%@ 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:24%; margin-top:10%; } #auto_div { display: none; 300px; border: 1px #74c0f9 solid; background: #FFF; position: absolute; top: 24px; left: 0; color: #323232; } .list{ display:block; font-size: 39px; margin-top: 167px; } .search_text{ 66%; 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 <= 0) { $("#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 <= 0) { $("#listall").children(".list").css("display", "none"); $("#none").css("display", "block"); } } else { $("#listall").children(".list").css("display", "block"); $("#none").css("display", "none"); } })