So I just decided to throw in an <input type="search"> element on a page, and I see Chrome renders a nice little X icon that I can click on to clear the value. It looks like this icon can trigger the change event, but only when the input content has changed since the last blur.
Say I am handling keyup events to automatically render results as a user types. As they type, results are filtered (automatically firing some ajax during each keyup event). Then, when the user stops and clicks the X icon, I want to revert back to showing all results.
I can’t seem to figure out how to handle this scenario. When the user starts with an empty box, they give it focus and start typing. However when they stop and click chrome’s X button, keyup is not fired (duh). Furthermore, when they blur, the change event is not fired because the search input is in the same state as it was when it first received focus.
Are there any other events fired when someone clicks this little X icon? Do I have to handle click as well as keyup, or is there something more specific?
You’re probably looking for the onsearch event which is fired whenever the user searches or the search text is removed by pressing the
x