快速过滤器/搜索列表jQuery插件 lookingfor.js

  • 源码大小:182.06KB
  • 所需积分:1积分
  • 源码编号:19JP-3345
  • 浏览次数:637次
  • 最后更新:2023年06月03日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

lookingfor.js是一个小巧而快速的实时fitler/fuzzy搜索jQuery插件,它允许您的用户快速过滤由任何其他HTML元素创建的长HTML列表或大型数据集。

如何使用它:

1.在页面上包含lookingfor.js插件的缩小版。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/dist/jquery.lookingfor.min.js"></script>

2.启用搜索字段来筛选HTML列表。

  1. <input type="search" class="filter" />
  1. <ul class="demo">
  2. <li>Abkhazia,GE</li>
  3. <li>Afghanistan,AF</li>
  4. <li>Aland,AX</li>
  5. <li>Albania,AL</li>
  6. <li>Algeria,DZ</li>
  7. <li>American Samoa,AS</li>
  8. <li>Andorra,AD</li>
  9. <li>Angola,AO</li>
  10. <li>Anguilla,AI</li>
  11. <li>Antigua and Barbuda,AG</li>
  12. ...
  13. </li>
  1. $('ul.demo').lookingfor({
  2. input: $('input.filter'),
  3. items: 'li',
  4. });

3.确定在结果中突出显示匹配的字符。默认值:false。

  1. $('ul.demo').lookingfor({
  2. input: $('input.filter'),
  3. items: 'li',
  4. highlight: true,
  5. highlightColor: '#ffde00',
  6. });

4.该插件提供了一个回调功能,当在列表中找到搜索文本时会触发该功能。

  1. $('ul.demo').lookingfor({
  2. input: $('input.filter'),
  3. items: 'li',
  4. onFound: function(item, query){
  5. // ...
  6. }
  7. });

预览截图