[英]Button to clear text and reset search input not working
Ok, so I have a filterable search form that returns certain images in a grid, which works great, it resets when I delete the text in the search input, but when I click the "Clear" button, which should do the same thing as deleting the text, it doesn't work.好的,所以我有一个可过滤的搜索表单,它返回网格中的某些图像,效果很好,当我删除搜索输入中的文本时它会重置,但是当我点击“清除”按钮时,它应该做同样的事情删除文本,它不起作用。 Here is the HTML and JQuery used:
这是使用的 HTML 和 JQuery:
<form id="live-search" action="" class="styled" method="post" style="margin: 2em 0;">
<div class="form-group">
<input type="text" class="form-control" id="filter" value="" style="width: 80%; float: left;" placeholder="Type to search"/>
<span id="filter-count"></span>
<input type="button" class="clear-btn" value="Clear" style="background: transparent; border: 2px solid #af2332; color: #af2332; padding: 5px 15px; border-radius: 3px; font-size: 18px; height: 34px;">
</div>
</form>
This is the JQuery for the clearing text:这是清除文本的 JQuery:
jQuery(document).ready(function(){
jQuery("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = jQuery(this).val(), count = 0;
// Loop through the comment list
jQuery(".watcheroo").each(function(){
jQuery(this).removeClass('active');
// If the list item does not contain the text phrase fade it out
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
jQuery(this).show();
count++;
}
});
// Update the count
var numberItems = count;
});
//clear button remove text
jQuery(".clear-btn").click( function() {
jQuery("#filter").value = "";
});
});
Any help would greatly be appreciated.任何帮助将不胜感激。
value
is a property on a DOMElement, not a jQuery object. value
是 DOMElement 上的属性,而不是 jQuery 对象。 Use val('')
instead:使用
val('')
代替:
jQuery(document).ready(function($) {
$("#filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$(".watcheroo").each(function(){
var $watcheroo = $(this);
$watcheroo.removeClass('active');
if ($watcheroo.text().search(new RegExp(filter, "i")) < 0) {
$watcheroo.fadeOut();
} else {
$watcheroo.show();
count++;
}
});
var numberItems = count;
});
$(".clear-btn").click(function() {
$("#filter").val(''); // <-- note val() here
});
});
Note that I amended your code to alias the instance of jQuery passed in to the document.ready handler.请注意,我修改了您的代码以将传递给 document.ready 处理程序的 jQuery 实例作为别名。 This way you can still use the
$
variable safely within the scope of that function.这样您仍然可以在该函数的范围内安全地使用
$
变量。
As the accepted answer doesn't solve the problem.由于接受的答案不能解决问题。
Try input
event instead of keyup
尝试
input
事件而不是keyup
$("#filter").on("input", function() {.....
& then clear the filter input field on which event you want. & 然后清除您想要的事件的过滤器输入字段。
$(".clear-btn").on("click", function() {
$("#filter").val("").trigger("input");
});
Add this to your CSS:将此添加到您的 CSS:
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }
<form> <input type="search" name="search" placeholder="Search..."> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.