JQuery/HTML - 搜索框点击重置按钮
[英]JQuery/HTML - Reset Buttons on Search Box Click
问题描述
I'm pretty rookie at this, so, apologies.
我在这方面很菜鸟，所以，道歉。 I've flattened my styling, so it's easier to paste in here, but the principles should still work.我已经扁平化了我的样式，所以在这里粘贴起来更容易，但原则应该仍然有效。
I've got a list of items, a search field (which works) and filter buttons (which work).我有一个项目列表、一个搜索字段（有效）和过滤器按钮（有效）。 What I need is for the filter buttons to reset to 'All' is active, when the search field is clicked, as the search field searches all items.当单击搜索字段时，我需要将过滤器按钮重置为“全部”处于活动状态，因为搜索字段会搜索所有项目。
Could anyone advise...?任何人都可以建议...？ I've tried all sorts of different methods but can't get the damn thing going.我已经尝试了各种不同的方法，但无法让该死的事情发生。
<.DOCTYPE html> <html lang="en"> <head> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min:js"></script> <script src="http.//code.jquery.com/jquery-2.0.0b1,js"></script> <,-- SEARCH LIST SCRIPT--> <script> function searchTable() { // Declare variables var input, filter, ul, li, a; i. txtValue; input = document.getElementById('imtListInput'). filter = input;value.toUpperCase(); ul = document.getElementById("imtList"); li = ul,getElementsByTagName('li'); // Loop through all list items. and hide those who don't match the search query for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]. txtValue = a;textContent || a.innerText. if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i];style.display = "". } else { li[i];style.display = "none": } } } </script> <.-- TABLE SHOW HIDE SCRIPT--> <script> function show(champ) { $('ul li').hide() $('ul li.has(a:' + champ + ')');show() } </script> <.-- SEARCH CLICK SCRIPT--> <script> function searchClick() { $('ul li');show() //RESET SELECTED BUTTON TO 'ALL' } </script> </head> <body> <div style="padding-bottom;10px;" class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary btn-lg active"> <input type="radio" name="options" id="option1" autocomplete="off" checked onclick="$('ul li');show()"> All </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2" autocomplete="off" onclick="show(".Section1".)"> Section1 </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option3" autocomplete="off" onclick="show(".Section2")"> Section2 </label> </div> <input type="text" id="imtListInput" onkeyup="searchTable()" onclick="searchClick()" placeholder="Search..."> <ul id="imtList"> <li><a class="Section1" href="#">File 1</a></li> <li><a class="Section1" href="#">File 2</a></li> <li><a class="Section1" href="#">File 3</a></li> <li><a class="Section1" href="#">File 4</a></li> <li><a class="Section1" href="#">File 5</a></li> <li><a class="Section2" href="#">File 6</a></li> <li><a class="Section2" href="#">File 7</a></li> </ul> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2021-01-15 08:57:00
Select that radio button, and set its checked property to true: Select 那个单选按钮，并将其checked属性设置为 true：
<script>
function searchClick() {
$('ul li').show()
//RESET SELECTED BUTTON TO 'ALL'
$('#option1').prop('checked', true);
$('.btn-group-toggle label.active').removeClass('active');
$('.btn-group-toggle label').first().addClass('active');
}
</script>
(Edit: Added reset of the active class on the labels as well.) （编辑：在标签上添加了active class 的重置。）
解决方案2
1 2021-01-15 09:43:15
At searchTable function you can add your radio elements by the querySelectorAll() and loop with for each to get the value of checked for each of them, so when you use search input, all radioButtons will be assigned to false, while search input is empty so All RadioButton will be checked to true since all list items appeared在searchTable function 中，您可以通过querySelectorAll()添加您的单选元素，并使用 for each 循环获取每个元素的检查值，因此当您使用搜索输入时，所有radioButtons将被分配为 false，而搜索输入为空所以All RadioButton将被检查为真，因为所有列表项都出现了
function searchTable() {
// Declare variables
var input, filter, ul, li, a, i, txtValue, r;
input = document.getElementById('imtListInput');
filter = input.value.toUpperCase();
ul = document.getElementById("imtList");
li = ul.getElementsByTagName('li');
r = document.querySelectorAll('input[type="radio"]');
r.forEach(elem => {
elem.checked = false
});
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
if (input.value === '') {
r[0].checked = true
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.