简单 jQuery 页面内容搜索显示不准确的结果
Simple jQuery page content search show inaccurate results
我有 div 的列表,我想搜索其中的内容。如果 div 包含搜索词,我想显示 div 并隐藏所有其他内容。
我的脚本只能正常工作。它显示结果,但有时结果不准确。这是我的 html:
<form>
<input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Mark
</div>
<div class="position">
position
<br>
Cardiology
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
sam Bob
</div>
<div class="position">
position
<br>
Cardiovascular Surgery
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
David charles
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Richard rick
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Michael
</div>
<div class="position">
position
<br>
Anesthesiology
</div>
</div>
</div>
这是我的 jQuery:
$('.searchbox').keyup(function() {
var searchTerm = $('.searchbox').val().toLowerCase();
var content = $('#staff-directory-wrapper .single-staff');
content.each(function() {
$(this).text();
if ( $(this).is(":contains('"+ searchTerm + "')") ) {
$(content).hide();
$(this).fadeIn(400);
}
if ($('.searchbox').val() == '') {
$(content).show();
}
});
});
我认为问题在于搜索是基于字符而不是单词进行的。例如,如果我搜索词条 "cardio",会弹出几个没有该词或词 "cardiovascular" 的结果。我注意到这是确实显示的结果,字母 c ard i o 全部存在并按该顺序存在。这方面的一个例子是 div 中包含文本:
理查德·瑞克
位置
这些行包含字母 c a r d i o。
我已经修复了一些你的代码,你引用了一些错误的变量,错过了一个 else
并且错过了另一个 toLowerCase
,因为你在每个内容的每次迭代中隐藏了所有内容。
我还将字符串比较更改为 indexOf(var substr)
调用,这样速度更快,问题更少。
$('.searchbox').keyup(function() {
var searchTerm = $('.searchbox').val().toLowerCase();
var contents = $('#staff-directory-wrapper .single-staff');
contents.each(function() {
var text = $(this).text().toLowerCase();
if (text.indexOf(searchTerm) !== -1) {
$(this).fadeIn(400);
} else
$(this).hide();
if ($('.searchbox').val() == '') {
$(this).show();
}
});
});
.single-staff {
margin-bottom: 5px;
padding: 3px;
border-bottom: 1px dashed #ccc
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
Mark
</div>
<div class="position">
position
<br>Cardiology
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
sam Bob
</div>
<div class="position">
position
<br>Cardiovascular Surgery
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
David charles
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Richard rick
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
Michael
</div>
<div class="position">
position
<br>Anesthesiology
</div>
</div>
</div>
我有 div 的列表,我想搜索其中的内容。如果 div 包含搜索词,我想显示 div 并隐藏所有其他内容。
我的脚本只能正常工作。它显示结果,但有时结果不准确。这是我的 html:
<form>
<input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Mark
</div>
<div class="position">
position
<br>
Cardiology
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
sam Bob
</div>
<div class="position">
position
<br>
Cardiovascular Surgery
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
David charles
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Richard rick
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Michael
</div>
<div class="position">
position
<br>
Anesthesiology
</div>
</div>
</div>
这是我的 jQuery:
$('.searchbox').keyup(function() {
var searchTerm = $('.searchbox').val().toLowerCase();
var content = $('#staff-directory-wrapper .single-staff');
content.each(function() {
$(this).text();
if ( $(this).is(":contains('"+ searchTerm + "')") ) {
$(content).hide();
$(this).fadeIn(400);
}
if ($('.searchbox').val() == '') {
$(content).show();
}
});
});
我认为问题在于搜索是基于字符而不是单词进行的。例如,如果我搜索词条 "cardio",会弹出几个没有该词或词 "cardiovascular" 的结果。我注意到这是确实显示的结果,字母 c ard i o 全部存在并按该顺序存在。这方面的一个例子是 div 中包含文本:
理查德·瑞克 位置
这些行包含字母 c a r d i o。
我已经修复了一些你的代码,你引用了一些错误的变量,错过了一个 else
并且错过了另一个 toLowerCase
,因为你在每个内容的每次迭代中隐藏了所有内容。
我还将字符串比较更改为 indexOf(var substr)
调用,这样速度更快,问题更少。
$('.searchbox').keyup(function() {
var searchTerm = $('.searchbox').val().toLowerCase();
var contents = $('#staff-directory-wrapper .single-staff');
contents.each(function() {
var text = $(this).text().toLowerCase();
if (text.indexOf(searchTerm) !== -1) {
$(this).fadeIn(400);
} else
$(this).hide();
if ($('.searchbox').val() == '') {
$(this).show();
}
});
});
.single-staff {
margin-bottom: 5px;
padding: 3px;
border-bottom: 1px dashed #ccc
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
Mark
</div>
<div class="position">
position
<br>Cardiology
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
sam Bob
</div>
<div class="position">
position
<br>Cardiovascular Surgery
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
David charles
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="">
<div class="name">
Richard rick
</div>
<div class="position">
position
<br>
</div>
</div>
<div class="single-staff" style="display: block;">
<img src="" />
<div class="name">
Michael
</div>
<div class="position">
position
<br>Anesthesiology
</div>
</div>
</div>