带有select和Input的jQuery/Javascript表过滤器
带有select和Input的jQuery/Javascript表过滤器
提问于 2018-10-18 07:37:14
我有一个Bootstrap表，其中包含动态加载的数据，我必须通过下拉列表和多个输入来过滤这些数据。我已经让输入工作了，但是我似乎想不出如何让dropdown更好地使用输入。当我删除输入时，我似乎不能让下拉列表进行过滤。老实说，我不太确定我做错了什么，但我已经在这上面花了这么多时间，我不知道还能做什么。
下面是我的代码：
<main role="main" class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label class="table-label mb-3 w-100">
<select id="associationSelect" class="styled-select slate float-right mb-4 table-filter search-key select-table-filter" data-table="order-table" data-column="5">
<option selected="selected" value="">Search by local board</option>
<option value="">All Boards</option>
<option>Realtor Association Name</option>
<option>Business Association</option>
<option>Company Assn</option>
<option>Company Association</option>
</select>
</label>
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="search" id="firstNameInput" placeholder="First name" title="Type in a first name" data-column="0" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="officeNameInput" placeholder="Office name" title="Type in an office name" data-column="2" data-table="order-table">
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="cityTownInput" placeholder="City/Town" title="Type in a city/town name" data-column="3" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="lastNameInput" placeholder="Last name" title="Type in a last name" data-column="1" data-table="membersTable">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-12">
<table id="membersTable" class="table table-striped table-responsive-sm order-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Business Name</th>
<th scope="col">Address/City</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th class="d-none" scope="col">Association</th>
<th scope="col">Web</th>
</tr>
</thead>
<tbody>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test@htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">test</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">testington</td>
<td data-input="business-name">business company</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test@htmltest.com</td>
<td class="d-none" data-input="realtor-association">business association</td>
<td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Mister</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Testington</td>
<td data-input="business-name">company name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test@htmltest.com</td>
<td class="d-none" data-input="realtor-association">Company Assn</td>
<td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test@htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test@htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
</tr>
<tr id="noResult" class="">
<td> </td>
<td> </td>
<td colspan="" class="text-center">No Results Found</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main><!-- /.container -->下面是我的JS：
jQuery(document).ready(function(){
$(".search-key").on('change input', function() {
var emptyFields = $('.search-key').filter(function() {
return $.trim(this.value) === "";
});
if (emptyFields.length == $(".search-key").length) {
$('table tbody tr').each(function() {
$(this).show();
});
$('#noResult').hide();
} else {
var columnNumber = $(this).data('column');
var enteredValue = $(this).val();
//var enteredValue = $(this).val();
$('table tbody tr:visible').each(function() {
var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());
if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
$(this).hide();
$('#noResult').show();
} else {
$(this).show();
$('#noResult').hide();
}
});
}//else
});
});正如我所说的，输入工作得很好，但是我不知道如何让dropdown与它们一起工作。我尝试将值传递给一个字符串并使用indexOf搜索它，但不起作用。
任何帮助都是非常感谢的。
下面是我为此创建的一个小提琴：https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/
有没有人知道我该怎么做？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-18 07:48:14
问题出在这一行
$('table tbody tr:visible').each(function() {
// logics here is correct
});它应该是这样工作的：
对于所有更改的输入，您需要再次检查每个表行(无论它在上一次搜索中是可见的还是隐藏的)
尝试以下选择器
// remove `:visible` selector
$('table tbody tr').each(function() {
// logics here is correct
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52864996
复制相关文章
相似问题