首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现动态文字搜索功能

Posted in Javascript onJanuary 05, 2017

先简单讲一下需求：页面中会列出多行个人信息记录，为方便查找，在顶层增加一个搜索栏，可根据用户姓名查找记录。

如果只想查看代码，可跳过分析过程，文章底部提供了完整的代码。

以下是我的编写过程：

动态页面，多条记录均由forEach生成，结构如下：

<form name="userForm"> 
  <table style="width:200px;"> 
    <thead> 
      <tr> 
        <th> </th> 
        <th> </th> 
        <th>教师姓名</th> 
      </tr> 
    </thead> 
    <tbody> 
      <c:forEach items="${userList}" var="user" varStatus="itStatus"> 
      <tr> 
        <td class="cellBg-gary">${itStatus.index+1}</td> 
        <td> 
          <input type="checkbox" name="userId" value="${user.id}"/> 
        </td> 
        <td>${user.name}</td> 
      </tr> 
      </c:forEach> 
    </tbody> 
  </table> 
</form>

为了方便调试静态页面，可以先将web项目启动，然后在浏览器中查看源代码，复制form中的代码，另存为一个本地HTML文件。

chrome操作如下：

jQuery实现动态文字搜索功能

为了看起来舒服一些，简单的增加一些表格样式：

<style type="text/css"> 
  table{ 
    border-collapse:collapse; 
    text-align: center; 
  } 
  table, th, td{ 
    border: 1px solid black; 
  } 
</style>

接下来，我们在<thead>中增加一个搜索框：

<tr> 
  <th colspan="3"> 
    <input type="text" id="searchText"/> 
    <input type="button" id="searchBtn" value="搜索"/> 
  </th> 
</tr>

设置一个单击事件的监听：

$(function(){ 
  $('#searchBtn').on('click', function(){ 
    alert('search'); 
  }); 
});

这里有两个建议：

1、为了避免代码相互影响，尽量明确监听的作用域

2、当你不确定当前的事件触发者时（如：<td><a href="#" onclick=""</a></td>），可以alert($(this))来确定触发元素

修改后的代码如下：

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    alert($(this).val() + ':' + $(this).html()); 
  }); 
});

我们可以通过$('#searchText').val()获取文本框中输入的数据，无难度，主要问题是怎么在页面中查找与之匹配的元素：

为了提高效率，尽可能的避免使用each、replace和RegExp()，推荐使用jQuery :contains选择器，具体用法为$("td:contains(str)")

这里遇到了一个问题：contains(str)中的str对象会被理解为字符串"str"，找到的解决方案是采用字符串拼接的方式，有更好的解决方案的前辈，请不吝赐教。

并且，为了准确查找，我们给需要查找的<td>标签设置一个class属性,则有：

<td class="userNameTd">${user.name}</td> 

所以，获取查找结果的语句为：

$("td.userNameTd:contains("+  $('#searchText').val() +")") 

为了明确显示查找结果，我采用的方案是先将<tbody>下的<tr>全部隐藏，然后再将结果所在的<tr>行显示出来，

而且当输入框中的值为空时，显示出所有列。方法变为：

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    if($('#searchText').val()){ 
      $('#userForm').find('tbody tr').hide() 
      $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); 
    }else{ 
      $('#userForm').find('tbody tr').show(); 
    } 
  }); 
});

至此，一个简单的文字搜索已经初具雏形了。我们再来进行一些完善工作。

首先，为了更搜索关键字更醒目一些，我们可以改变一下$('#searchText').val()的背景颜色

我们先创建一个样式：

.bg-y{ 
  background-color: yellow; 
}

因为操作的是文字，而不是对象，所以不能增加class属性，解决方法为采用 replace('str', '<span class="bg-y">'+str+'</span>');

对统一对象进行多次操作，可以先将对象赋值给一个变量。修改后的代码为：

$(function(){ 
  $('#userForm').on('click', '#searchBtn', function(){ 
    var searchText = $('#searchText').val(); 
    if(searchText){ 
      $('#userForm').find('tbody tr').hide(); 
      var tds = $("td.userNameTd:contains("+ $('#searchText').val() +")"); 
      tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); 
      tds.parent('tr').show(); 
    } else { 
      $('#userForm').find('tbody tr').show(); 
    } 
  }); 
});

这时又遇到了一个问题，之前增加背景颜色的文字，不会取消背景色。所以，我们在每次事件发生时，执行一个cleanHighLight()函数,将搜索时增加的<span>再替换成原先的内容。

function cleanHighLight() { 
  var tds = $('span.bg-y').parent(); 
  var vCurrentText = $('span.bg-y').html(); 
  if(!!tds.html()){ 
    tds.html(tds.html().replace('<span class="bg-y">'+ vCurrentText +'</span>', vCurrentText )); 
  } 
}

然后，感觉输入文本之后，还需要点击，这点不够友好，我们能不能采用输入文本即可动态搜索呢？

我们试着将监听对象改变为输入框'#searchText'，监听事件变为'change'

$('#userForm').on('change', '#searchText', function(){ 
  //alert($('#searchText').val()); 
  $('#userForm').find('tbody tr').hide() 
  $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); 
});

但结果是，必须在文本框失去焦点时才会触发事件，并没有达到预期。

通过查找资料，找到了解决方案：可同时绑定oninput 和onpropertychange事件。代码如下：

$(function(){ 
  $('#userForm').on('input propertychange', '#searchText', function(){ 
    var searchText = $('#searchText').val(); 
    cleanHighLight(); 
    if(searchText){ 
      $('#userForm').find('tbody tr').hide(); 
      var tds = $("td.userNameTd:contains("+searchText +")"); 
      tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); 
      tds.parent('tr').show(); 
    } else { 
      $('#userForm').find('tbody tr').show(); 
    }   
  }); 
});

另外，我们可以给searchText 增加一个$.trim()函数，避免误输入空格字符：

var searchText = $.trim($('#searchText').val()); 

最后，我们再给文本框增加一些简单的HTML5元素

将 <input type="text" />标签替换为 <input type="search" /> (增加了一个删除按钮)

增加一个autocomplete="on"的属性，可以让浏览器预测字段输入

再增加一个占位符属性，placeholder="例如：张三"

这些HTML5标签在不同浏览器下，可能有不能的显示效果，但是即使在ie6下，也不会影响搜索功能。

动态文字搜索功能，暂时先写到这。

附完整代码：

<!DOCTYPE html> 
<html> 
  <head> 
    <title>动态文字搜索</title> 
    <meta charset='utf-8' /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
      $(function(){ 
        $('#userForm').on('input propertychange', '#searchText', function(){ 
          var searchText = $.trim($('#searchText').val()); 
          cleanHighLight(); 
          if(searchText){ 
            $('#userForm').find('tbody tr').hide(); 
            var tds = $("td.userNameTd:contains("+ searchText +")"); 
            if(!!tds.html()) { 
              tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); 
            } 
            tds.parent('tr').show(); 
          } else { 
            $('#userForm').find('tbody tr').show(); 
          } 
           
        }); 
      }); 
      function cleanHighLight() { 
        var tds = $('span.bg-y').parent(); 
        var vSearchText = $('span.bg-y').html(); 
        if(!!tds.html()){ 
          tds.html(tds.html().replace('<span class="bg-y">'+vSearchText+'</span>', vSearchText)); 
        } 
      } 
    </script> 
  </head> 
  <style type="text/css"> 
    table{ 
      border-collapse:collapse; 
      text-align: center; 
    } 
    table, th, td{ 
      border: 1px solid black; 
    } 
    .bg-y{ 
      background-color: yellow; 
    } 
  </style> 
  <body> 
    <div id="container"> 
      <form name="userForm" id="userForm"> 
        <table> 
          <thead> 
            <tr> 
              <th colspan="3"> 
                <input type="search" id="searchText" autocomplete="on"/> 
              </th> 
            </tr> 
            <tr> 
              <th> </th> 
              <th> </th> 
              <th>姓名:</th> 
            </tr> 
          </thead> 
          <tbody> 
            <tr> 
              <td>1</td> 
              <td> 
                <input type="checkbox" name="userId" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>2</td> 
              <td> 
                <input type="checkbox" name="userId" value="111111111111111111111111111111111111"> 
              </td> 
              <td class="userNameTd">默认</td> 
            </tr> 
            <tr> 
              <td>3</td> 
              <td> 
                <input type="checkbox" name="userId" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d"> 
              </td> 
              <td class="userNameTd">管理员5</td> 
            </tr> 
            <tr> 
              <td>4</td> 
              <td> 
                <input type="checkbox" name="userId" value="49adbf34-d9bc-4f5c-b440-cad07913afa1"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>5</td> 
              <td> 
                <input type="checkbox" name="userId" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4"> 
              </td> 
              <td class="userNameTd">admin4real</td> 
            </tr> 
            <tr> 
              <td>6</td> 
              <td> 
                <input type="checkbox" name="userId" value="6148129f-6682-41a5-b097-28d02e804a69"> 
              </td> 
              <td class="userNameTd">admin7</td> 
            </tr> 
            <tr> 
              <td>7</td> 
              <td> 
                <input type="checkbox" name="userId" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>8</td> 
              <td> 
                <input type="checkbox" name="userId" value="8e2e427c-edf7-40e3-bcc1-18430549ca80"> 
              </td> 
              <td class="userNameTd">admin3</td> 
            </tr> 
            <tr> 
              <td>9</td> 
              <td> 
                <input type="checkbox" name="userId" value="91072894-0c0c-43f8-b294-bbe1990531df"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>10</td> 
              <td> 
                <input type="checkbox" name="userId" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>11</td> 
              <td> 
                <input type="checkbox" name="userId" value="9200b2d4-79f3-4b71-a023-d67618ff0eba"> 
              </td> 
              <td class="userNameTd">admin2</td> 
            </tr> 
            <tr> 
              <td>12</td> 
              <td> 
                <input type="checkbox" name="userId" value="a14cea40-02c3-479c-9ef0-d493d013c409"> 
              </td> 
              <td class="userNameTd">admin1Real</td> 
            </tr> 
            <tr> 
              <td>13</td> 
              <td> 
                <input type="checkbox" name="userId" value="b903ea21-95d6-4390-9832-f7de83a8b6ba"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>14</td> 
              <td> 
                <input type="checkbox" name="userId" value="badf02fe-e494-479c-922c-dfa5967d21fb"> 
              </td> 
              <td class="userNameTd">王五</td> 
            </tr> 
            <tr> 
              <td>15</td> 
              <td> 
                <input type="checkbox" name="userId" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd"> 
              </td> 
              <td class="userNameTd">张三</td> 
            </tr> 
            <tr> 
              <td>16</td> 
              <td> 
                <input type="checkbox" name="userId" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a"> 
              </td> 
              <td class="userNameTd">朝气</td> 
            </tr> 
            <tr> 
              <td>17</td> 
              <td> 
                <input type="checkbox" name="userId" value="d00d125f-95a6-4fb4-b209-a283773ddfd6"> 
              </td> 
              <td class="userNameTd">管理员5</td> 
            </tr> 
            <tr> 
              <td>18</td> 
              <td> 
                <input type="checkbox" name="userId" value="fe76629d-d24d-4296-be05-bf2897f67066"> 
              </td> 
              <td class="userNameTd">ADMIN124</td> 
            </tr> 
          </tbody> 
        </table> 
      </form> 
    </div> 
  </body> 
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jQuery实现动态文字搜索功能

- Author -

wangyuheng77

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 #Javascript
WR-800F(1) i7 6700(1) ICOM(2) 对讲机(1) R71E(1) React(6) R72E(1) GTX1660(1) 胆机(1) DE1102(1)
You might like
PHP 多维数组排序实现代码
2009/08/05 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript模拟push
2016/03/06 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python中字典和集合学习小结
2017/07/07 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python3标准库总结
2019/02/19 Python
Django使用rest_framework写出API
2020/05/21 Python
迪士尼英国官方商店：shopDisney UK
2019/09/21 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
药店主任岗位责任制
2014/02/10 职场文书
培训科主任岗位职责
2014/08/08 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
暑期家教宣传单
2015/07/14 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript