小巧灵活的模糊搜索 jQuery 插件 - Fuzzy.js

小巧灵活的模糊搜索 jQuery 插件 - Fuzzy.js

版本:

浏览量:1642

最后更新:2021-09-05

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

一个轻量级且灵活的模糊搜索 jQuery 插件,用于使用近似字符串匹配技术在数据集中搜索文本。

它允许您找到与术语近似而不是完全匹配的相关结果。可用于站点搜索、产品过滤器、输入自动完成等。

如何使用它:

1.jquery.fuzzy.js在jQuery之后加载库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fuzzy.js"></script>

2. 创建一个搜索字段来过滤您的内容。

<input type="text" id="searchBar" />

3. 按如下方式准备数据集:

<div id="dataset">
  <div class="row" id="row1">Content 1</div>
  <div class="row" id="row2">Content 2</div>
  <div class="row" id="row3">Content 3</div>
  ...
</div>
var dataset = [];
var i = 1;
$('div#dataset .row').each(function(){
  dataset.push({title: $(this).text(), id: $(this).attr('id')});
});

4、在搜索栏调用插件开启模糊搜索:

$('#searchBar')
  .fuzzy({
    dataset : dataset,
    searchkey: 'title'
  })
   
  .on('fuzzy.clear', function(e, matches){
    // delete previously highlighted rows
    $('.row.highlight').remove();
    // Show rows
    $('div#dataset .row').show();
  })
 
  .on('fuzzy.search', function(e, matches){
    // Matches will be the same as dataset, except it now has a new key: hlString (highlight string)
    // delete previously highlighted rows
    $('.row.highlight').remove();
    // Hide rows
    $('div#dataset .row').hide();
 
    var i;
    for (i in matches) {
      var match = matches[i];
      // Use the id to show the highlighted string
      $row = $('<div class="row highlight">'+match['hlString']+'</div>');
      $('#'+match.id).after($row);
    }
});

5. 确定在搜索字段中键入的最小字符数以激活模糊搜索功能。默认值:3。

$('#searchBar')
.fuzzy({
  dataset : dataset,
  searchkey: 'title',
  minLength: 1,
})
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。