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

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

以下是我的编写过程:

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

<form name="userForm"> 
  <table style="width:200px;"> 
    <thead> 
      <tr> 
        <th>&nbsp;</th> 
        <th>&nbsp;</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="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。