当“清除按钮"出现时，如何刷新过滤器搜索在文本< input>的边缘被点击? [英] How to refresh filter search WHEN the "clear button" at the edge of a text <input> is clicked?
问题描述
我为列表<ul>设置了过滤器，这是input的html过滤器.
I have filter for my list <ul> here is my html for the input where I have my filter.
<h1>Image Gallery</h1>
<div class="searchbox">
<input type="text" placeholder="Search" class="search" onkeyup="search()" id="myInput" >
</div>
我的js 函数search(){
my js function search() {
var filter = $('input').val().toUpperCase().split(' ');
var li = $('li');
var a = $('a');
for (var i = 0; i < li.length; i++) {
a = li[i];
var text = a.innerHTML.toUpperCase();
for(var f = 0; f < filter.length; f++) {
if (text.indexOf(filter[f]) > -1 ) {
li[i].style.display = '';
//break; // don't need further matches
} else {
li[i].style.display = 'none';
}
}
}
}
我想要的是当我从输入中点击x并清除字母并重新加载信息，但不重新加载资产时，您必须按BACKSPACE以便发生这种情况.例如此处
The thing that I want to is when I hit the x from the input and clear out letters and reload info, but doesn't reload the assets, you have to press BACKSPACE for this to happen. an example of this is here
您可以编写任何内容，并且过滤器可以工作，但是单击输入中的X只会清除字母，然后单击BACKSPACE并重置信息.
you can write anything and the filter works but then click on the X inside the input only clears the letters, then you hit BACKSPACE and you reset the info.
那么如何只用一次输入X来完成此操作，只需单击一下，然后:
1.清除字母
2.还会重置信息，例如按BACKSPACE
so how can you do this with only th X from the input, only one click and:
1. clear the letters
2. but also reset the info, like if you were pressing the BACKSPACE
推荐答案
听起来您想在输入字段的清除按钮('x')中添加一个事件侦听器，该侦听器将运行您的搜索功能(或替代地，创建的清晰功能可以刷新您的数据.
It sounds like you want to add an event listener to the clear button ('x') inside of your input field which will run your search function (or alternatively a clear function which you create which refreshes your data).
此刻，退格键起作用了，因为onkeyup="search()"事件触发了一个更新数据的函数调用.最简单的解决方案是为调用相同功能的输入"X"创建一个click事件，理想情况下将输入的值设置为空字符串.如前所述，您可以选择创建一个"clearSearch"函数并将其用作click事件的回调函数，该函数将专门清除先前的结果并将输入字段的值设置为空字符串.
At the moment, backspace works because the onkeyup="search()" event triggers a function call that updates your data. The simplest solution would be to create a click event for the input's 'X' that calls the same function, ideally setting the input's value to an empty string. As I mentioned you could alternatively create a 'clearSearch' function and use that as the callback function to the click event which would specifically clear the previous results and set the value of the input field to an empty string.
编辑-添加事件侦听器示例以调用搜索方法:
Edit - Add example of event listener to invoke search method:
- 如上所述，听起来您有一些代码可以在输入内部生成一个清晰的按钮(您所指的"x").我不确定这是什么，因此在下面的示例代码中，我使用按钮(id ="clearButton")模拟了该行为.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<input type="text" placeholder="Search" onkeyup="search()" class="search" id="myInput" />
<!-- Added this button because I'm not sure how you are generating the 'x' -->
<input type="button" click="clear()" id="clearButton" value="X" />
<script type="text/javascript">
// Use an event listener to assign the 'clear' function to the click event on the button
window.onload = function() {
document.getElementById("clearButton").addEventListener("click",clear);
}
function search() {
var filter = $('input').val().toUpperCase().split(' ');
var li = $('li');
var a = $('a');
for (var i = 0; i < li.length; i++) {
a = li[i];
var text = a.innerHTML.toUpperCase();
for(var f = 0; f < filter.length; f++) {
if (text.indexOf(filter[f]) > -1 ) {
li[i].style.display = '';
//break; // don't need further matches
} else {
li[i].style.display = 'none';
}
}
}
}
function clear() {
// Select the 'myInput' search box, and set it's value to an empty String
document.getElementById("myInput").value = "";
// Call seach, which should reset the result list
search();
}
</script>
</body>
</html>
我使用香草JS作为添加的代码，但它与jQuery相同.
I used vanilla JS for the code I've added, but it will work the same with jQuery.
这篇关于当“清除按钮"出现时，如何刷新过滤器搜索在文本< input>的边缘被点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
