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>

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

Javascript 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JavaScript实现星级评分
Jan 12 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
You might like
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php获取图片信息的方法详解
2015/12/10 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
图片自动更新(说明)
2006/10/02 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
JS高级运动实例分析
2016/12/20 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
abstract是什么意思
2012/02/12 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
保送生自荐信范文
2013/10/06 职场文书
思想汇报范文
2013/11/04 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
2015年女工委工作总结
2015/07/27 职场文书