Javascript 如何在；“清除按钮”；在文本的边缘<；输入>；点击了吗？

我的列表有过滤器

这里是我的html，用于

输入

，我在那里有过滤器

<h1>Image Gallery</h1>
 <div class="searchbox">
  <input type="text" placeholder="Search"  class="search" onkeyup="search()" id="myInput" >
</div>  

图像库

我的js 函数搜索（）{

var filter=$（'input'）.val（）.toUpperCase（）.split（“”）；
var li=$（'li'）；
变量a=$（'a'）；
对于（变量i=0；i-1{
li[i].style.display=''；
//break；//不需要进一步匹配
}否则{
li[i].style.display='none'；
}
}
}

}

我想做的事情是，当我从输入中点击

x

，清除字母并重新加载信息，但不重新加载资产时，您必须按

BACKSPACE

，才能发生这种情况。这方面的一个例子是

你可以写任何东西，过滤器工作，但是点击输入中的X只清除字母，然后点击

BACKSPACE

，然后重置信息

那么，如何只需点击输入中的th

X

，然后：
1.清除字母

---

2.但也要重置信息，比如，如果您按下

退格按钮，听起来您想在输入字段内的清除按钮（'x'）中添加一个事件侦听器，该按钮将运行搜索功能（或者您创建的一个清除功能，用于刷新数据）

此时，退格有效，因为
onkeyup=“search（）”
事件触发更新数据的函数调用。最简单的解决方案是为调用相同函数的输入的“X”创建一个单击事件，理想情况下将输入的值设置为空字符串。正如我提到的，您也可以创建一个“clearSearch”函数，并将其用作click事件的回调函数，该函数将专门清除以前的结果，并将输入字段的值设置为空字符串

编辑-添加要调用搜索方法的事件侦听器示例：


正如我上面提到的，听起来你有一些代码在你的输入中生成一个清晰的按钮（你指的是“x”）。我不确定这是什么，所以在下面的示例代码中，我用一个按钮（id=“clearButton”）模拟了这种行为



//使用事件侦听器将“清除”功能分配给按钮上的单击事件
window.onload=函数（）{
document.getElementById（“clearButton”）.addEventListener（“单击”，清除）；
}
函数搜索（）{
var filter=$（'input'）.val（）.toUpperCase（）.split（“”）；
var li=$（'li'）；
变量a=$（'a'）；
对于（变量i=0；i-1{
li[i].style.display=''；
//break；//不需要进一步匹配
}否则{
li[i].style.display='none'；
}
}
}
}
函数clear（）{
//选择“myInput”搜索框，并将其值设置为空字符串
document.getElementById（“myInput”）.value=“”；
//调用seach，它将重置结果列表
搜索（）；
}  
下面的一个对我有用，当我们在搜索输入字段内键入时，onkeyup将被触发，单击搜索字段内的“x”图标将触发onsearch事件，onsearch事件将触发onkeyup

<input type="search" id="search-name" class="form-control display" placeholder="Search 
by Name" onkeyup="callSomeFunction()" onsearch="this.onkeyup();">


function callSomeFunction() {
    // can write your code here
}


函数callSomeFunction（）{
//你可以在这里写代码
}
我无法理解什么是
x
，我是否遗漏了什么？它是指当您将鼠标悬停在网站的输入栏上时，右侧的小符号，就像您在浏览器中看到的用于关闭浏览器的x，而是在输入栏中@iceman@Iceman：：-ms clear CSS伪元素表示文本边缘的一个按钮（“清除按钮”），用于清除元素的当前值。此按钮和伪元素是非标准的，仅在Internet Explorer 10和11以及Edge 12+中受支持，因此为供应商前缀（
-ms
，适用于Microsoft）。“清除”按钮仅显示在聚焦的非空文本元素上。我现在就知道了！。无论如何，很高兴知道你的问题解决了！！谢谢你的回答，如果你能给我一个例子和代码，我将非常感谢，再次感谢@Wojtekt我想知道你是否能帮我回答这个问题我看到了你的答案。谢谢
<input type="search" id="search-name" class="form-control display" placeholder="Search 
by Name" onkeyup="callSomeFunction()" onsearch="this.onkeyup();">


function callSomeFunction() {
    // can write your code here
}