jquery实现静态搜索功能(可输入搜索文字)

下面我将详细讲解“jquery实现静态搜索功能(可输入搜索文字)”的完整攻略。

攻略说明

静态搜索功能是指在一定范围内（如一个表格、一个列表等）通过输入关键字实现文本搜索的功能。在实现静态搜索功能时，jQuery框架能够帮助我们更加快捷、高效地实现这一功能。下面是实现该功能的步骤：

1. 获取输入框中的关键字
2. 遍历搜索范围，匹配关键字并显示匹配结果

具体实现

获取输入框中的关键字

我们可以通过jQuery的val()方法获取输入框中的内容。首先，我们需要在HTML文档中编写一个搜索框：

<input type="text" id="search-input" placeholder="请输入搜索内容">

在jQuery中，我们可以这样获取该input元素的内容：

var keyword = $('#search-input').val();

遍历搜索范围，匹配关键字并显示匹配结果

遍历搜索范围并匹配关键字的方法其实很多，这里我提供两种示例：

示例1：筛选功能

这种方法通过使用jQuery的filter()方法筛选符合条件的元素。首先，我们需要将需要搜索的内容存放在一个ul或table等元素中：

<ul id="list">
  <li>苹果</li>
  <li>橘子</li>
  <li>香蕉</li>
  <li>西瓜</li>
</ul>

然后，在jQuery中，我们可以这样进行搜索：

var keyword = $('#search-input').val();
$('#list li').filter(':contains(' + keyword + ')').show();
$('#list li').filter(':not(:contains(' + keyword + '))').hide();

这段代码会将ul元素中含有输入关键字的li元素显示出来，其余的元素隐藏。

示例2：高亮显示

这种方法通过在匹配到的元素中添加<span>标签来高亮显示搜索关键字。还是以ul元素为例：

<ul id="list">
  <li>苹果</li>
  <li>橘子</li>
  <li>香蕉</li>
  <li>西瓜</li>
</ul>

在jQuery中，我们可以这样进行搜索：

var keyword = $('#search-input').val();
$('#list li').each(function () {
  var str = $(this).text();
  var reg = new RegExp(keyword, 'g');
  str = str.replace(reg, '<span>' + keyword + '</span>');
  $(this).html(str);
});

这段代码会将ul元素中含有输入关键字的li元素中的关键字高亮显示。

结论

综上所述，以上两种方法都可以实现静态搜索功能。如果需要实现的搜索范围比较大，如果使用第一种方法可能会比较耗费计算资源，而第二种方法则可能会占用较多的dom操作。开发者应根据需要选择适合自己的方法进行实现。