[英]Live Search Filter Using Jquery
i have problem in live search when i search the name the age will hide. 当我搜索年龄会隐藏的名字时,我在实时搜索中遇到问题。 i want is only the name can search it.
我想要的只是名称可以搜索它。 and then the age not appear.
然后年龄不会出现。
please check my code. 请检查我的代码。
this is my html 这是我的HTML
<table class="AvailableGroupLab availGrpLabs avalLabs">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td><span>wewe</span></td>
<td>16</td>
</tr>
<tr>
<td><span>Melvin</span></td>
<td>18</td>
</tr>
<tr>
<td><span>Marvin</span></td>
<td>20</td>
</tr>
</table>
and this is my jquery 这是我的jQuery
<script type="text/javascript">
var span = $(".AvailableGroupLab").clone().html();
function filter(element) {
$('.AvailableGroupLab').html(span);
var value = $(element).val().toLowerCase();
$(".AvailableGroupLab span").each(function () {
if ($(this).text().toLowerCase().search(value) == -1) {
$(this).remove();
}
});
}
</script>
$("#src").keyup(function() {
var val = $(this).val().toLowerCase();
$(".name").hide();
$(".name").each(function() {
var text = $(this).text().toLowerCase();
if(text.indexOf(val) != -1)
{
$(this).show();
}
});
});
$(document).ready(function() { $(document).ready(function(){
/ ---- HERE WE FDEOUT AND HIDE DIV WHICH GRABL PRODUCTS LIST & PRICE ---- / / ----我们在这里隐藏和隐藏GRABL产品的清单和价格---- /
$(".col-md-9 .show_this_li").fadeOut(500);
/ ---- HERE WE START SEARCH FUNCTION ---- / / ----我们在这里开始搜索功能---- /
$("#src").keyup(function() {
$(".col-md-9 .show_this_li").fadeIn(500);
/ ---- HERE WE FADEOUT AND HIDE 1ST DIV WHICH GRABL LIST WITH CATS HEADING ---- / / ----我们在这里淡出并隐藏带有CATS标题的GRAV列表的第一个DIV ---- /
$(".col-md-9 .hide_this").fadeOut(200);
$('.clear_src').html("<h6>Clear Search</h6>");
/ --- GET SEARCH FIELD TEXT VALUE ---- / / ---获取搜索文本值---- /
var val = $(this).val().toLowerCase();
$(".hover").fadeOut(200);
$('.error').html("").fadeIn(100);
$(".hover").each(function() {
var text = $(this).text().toLowerCase();
/ ---- CHECK SEARCH FIELD TEXT WITH LI PRODUCTS ---- / / ----检查带有LI产品的搜索文本---- /
if(text.indexOf(val) != -1)
{
$('.error').html("<h6>Please Wait...</h6>").fadeOut(200);
$(this).fadeIn(300);
}else {
//$('.error').html($('<h5/>').text("No Data Found"));
}
});
});
/ ---- HERE WE FADEIN AND SHOW LIST WITH CATS WHEN USER LEFT SEARCH FIELD AND FIELD IS EMPTY ---- / / ----当用户向左或向左搜索字段时,我们会在此处收藏和显示带猫的列表---- /
$("#src").keyup(function() {
var val = $(this).val();
if(val.length<1)
{
$(".col-md-9 .hide_this").show(1000);
$(".col-md-9 .show_this_li").fadeOut(500);
$('.error').html("<h6>Refressing...</h6>").fadeOut(200);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.