试试这个，希望能帮到你

$("input[name=search-mini]").on("search", function() {
  //do something for search
});

基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

这可以在几乎所有的条件下工作，粘贴文本，具有增量属性，ENTER/ESC键按下等。

将搜索事件绑定到搜索框，如下所示-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

点击TextField交叉按钮(X) onmousemove()被触发，我们可以使用这个事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

完整的解决方案在这里

这将在单击搜索x时清除搜索。 或 当用户按回车键时，将调用搜索API。 这段代码可以通过附加的esc键up事件匹配器进一步扩展。但是这个应该能搞定。

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

欢呼。

最初的问题是“我能检测到点击‘x’吗?” 这可以通过在搜索事件中“牺牲”Enter来实现。

There are many events firing at different times in the lifecycle of an input box of type search: input, change, search. Some of them overlap under certain circumstances. By default, "search" fires when you press Enter and when you press the 'x'; with the incremental attribute, it also fires when you add/remove any character, with a 500ms delay to capture multiple changes and avoid overwhelming the listener. The trouble is, search generates an ambiguous event with input.value == "", because there are three ways it could have turned empty: (1) "the user pressed the 'x'", (2) "the user pressed Enter on an input with no text", or (3) "the user edited the input (Backspace, cut, etc) till the input became empty, and eventually incremental triggered the search event for the empty input".

消除歧义的最佳方法是将Enter从等式中去掉，只在按下“x”时启动搜索。您可以通过完全压制Enter键来实现这一点。我知道这听起来很傻，但是您可以通过keydown事件(在这里您也可以进行压制)、输入事件或更改事件在更好的控制情况下恢复Enter行为。搜索唯一的独特之处就是点击“x”。

如果您不使用增量，这将消除歧义。如果您使用增量，那么您可以通过输入事件实现大多数增量行为(您只需要重新实现500ms的debounning逻辑)。因此，如果您可以删除增量(或可选地用输入模拟它)，这个问题可以通过使用event.preventDefault()组合搜索和keydown来回答。如果你不能放弃增量，你将继续有上面描述的一些模糊性。

下面是演示这一点的代码片段:

inpEl = document.getElementById("inp"); monitor = document.getElementById("monitor"); function print(msg) { monitor.value += msg + "\n"; } function searchEventCb(ev) { print(`You clicked the 'x'. Input value: "${ev.target.value}"`); } function keydownEventCb(ev) { if(ev.key == "Enter") { print(`Enter pressed, input value: "${ev.target.value}"`); ev.preventDefault(); } } inpEl.addEventListener("search", searchEventCb, true); inpEl.addEventListener("keydown", keydownEventCb, true); <input type="search" id="inp" placeholder="Type something"> <textarea id="monitor" rows="10" cols="50"> </textarea>

在这个简单的代码片段中，您已经将搜索变成了一个专门的事件，它只在您按下'x'时触发，并回答了最初发布的问题。你跟踪输入。值，并按下Enter键。

就我个人而言，我更喜欢在按Enter键时输入ev.target.blur()(模拟输入框失去焦点)，并监视更改事件以跟踪输入。值(而不是监视输入。Value via keydown)。通过这种方式，您可以统一地跟踪输入。焦点变化的值，这可能是有用的。它适用于我，因为我只需要处理输入的事件。价值实际上已经改变了，但它可能并不适用于每个人。

下面是blur()行为的代码片段(现在即使您手动将焦点从输入框移开，也会收到消息，但请记住，只有在实际发生更改时才会看到更改消息):

inpEl = document.getElementById("inp"); monitor = document.getElementById("monitor"); function print(msg) { monitor.value += msg + "\n"; } function searchEventCb(ev) { print(`You clicked the 'x'. Input value: "${ev.target.value}"`); } function changeEventCb(ev) { print(`Change fired, input value: "${ev.target.value}"`); } function keydownEventCb(ev) { if(ev.key == "Enter") { ev.target.blur(); ev.preventDefault(); } } inpEl.addEventListener("search", searchEventCb, true); inpEl.addEventListener("change", changeEventCb, true); inpEl.addEventListener("keydown", keydownEventCb, true); <input type="search" id="inp" placeholder="Type something"> <textarea id="monitor" rows="10" cols="50"> </textarea>