详细信息
一个轻量级且灵活的模糊搜索 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,
})
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。