How to Detect the Clearing of a "Search" HTML5 Input

How do you detect the clearing of a search HTML5 input?

Actually, there is a "search" event that is fired whenever the user searches, or when the user clicks the "x". This is especially useful because it understands the "incremental" attribute.

Now, having said that, I'm not sure if you can tell the difference between clicking the "x" and searching, unless you use an "onclick" hack. Either way, hopefully this helps.

Dottoro web reference

How do you detect the clearing of a type “search” HTML5 input in ASP.NET using TextBoxFor?

I have tried following code:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="clearable" type="text" name="" value="" placeholder="" />

JQuery:

function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    alert('33');// put window.location('url goes here');
    $(this).removeClass('x onX').val('').change();
});

CSS:

.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

Fiddle is here : click here

Hope it helps you .. :)

Happy Coding..

HTML type=search detect clear button support

Best answer I can come up with at the moment. It is one level under browser sniffing. It can break easily with browser upgrades or users changing the default behavior with generic CSS rules.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Test</title>
  </head>
  <body>
    <input type="text" id="t1" class="tb"/><br/>
    <input type="search" id="s1" class="tb"/><br/>
    <input type="search" id="s2" class="tb"/><br/><br/>
    <textarea id="ta" cols="60" rows="5"></textarea>
    <script type="text/javascript">

        var supported = {

            getCSSValue: function(element, property) {
                var cs = document.defaultView.getComputedStyle(element, null);
                return cs.getPropertyValue(property);
            },

            _makeSearchElem : function(){    
                var element = document.createElement("input");
                element.setAttribute("type","search");    
                return element;
            },

            //checks to see if type="search" is supported
            searchType : function(){
                var elm = this._makeSearchElem();
                var result = this._searchType( elm );
                elm = null;
                //redefine so we do not have to recalc this every call
                this.searchType = function(){
                    return result;
                }
                return result;
            },

            _searchType : function(element){        
                return element.type === "search";
            },

            //checks to see if type="search" is supported AND it has the clean button
            //This is almost to the level of browser sniffing since only WebKit supports it at the moment
            searchTypeWithClearButton : function( ){

                /*
                    Assumes that the developer does not disable the clear button with CSS
                        input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
                    Only way to detect that would be to walk the style sheet and regex match the selector and cssText [Yuck]
                */

                var isSearchWithClear = false;

                var element = this._makeSearchElem();
                element.style.display = "none";            

                //Before we check CSS make sure the type is search
                if(this._searchType( element )){

                    //Add element to page flow so we can read the computed style
                    document.body.appendChild( element );        
                    var webkitAppearance = this.getCSSValue(element, "-webkit-appearance");
                    document.body.removeChild( element );

                    isSearchWithClear = webkitAppearance === "searchfield";  //this may break if someone adds a generic class to change it to textfield.

                }

                element = null;

                //redefine so we do not have to recalc every call
                this.searchTypeWithClearButton = function(){
                    return isSearchWithClear;
                }

                return isSearchWithClear;

            }

        }        

        /*
        //    Running basic tests:
        */

        //Check for just search
        var x1 = supported.searchType();
        var str = "Supports search: \t" + x1 + "\n";

        //Check for just search again, make sure cached value works
        var x2 = supported.searchType();
        str += "Supports search [run 2]: \t" + x2 + "\n";

        //Check for search with clear button
        var x3 = supported.searchTypeWithClearButton();
        str += "Supports search with clear button: \t" + x3 + "\n";

        //Check for search with clear button again, make sure cached value works
        var x4 = supported.searchTypeWithClearButton();
        str += "Supports search with clear button  [run 2]: \t" + x4;

        document.getElementById("ta").value = str;

    </script>
  </body>
</html>

Any event for reset button on click of input type=search?

The event is called search. It is fired on both: the search and the reset.
You just need to check if the query is empty or not.

For example:

$("#searchInput").on("search", function(evt){
    if($(this).val().length > 0){
        // the search is being executed
    }else{
        // user clicked reset
    }
});

It works, here is the fiddle: https://fiddle.jshell.net/ye1dabap/

Detect texbox clear-event in IE. How do I clear the input type=text (textbox) in IE (Internet Explorer) when IE-specific clear-box is clicked?

I do not know about special event for this small x-like button, and I don't think that it exists, but you can use input event (oninput="qsearchLookup(this.value)" in your case) to catch this change.

What event is triggered when the user cancels input via the webkit cancel button?

There is an event for this: oninput.

Occurs when the text content of an element is changed through the user
interface.

The oninput is useful if you want to detect when the contents of a
textarea, input:text, input:password or input:search element have
changed, because the onchange event on these elements fires when the
element loses focus, not immediately after the modification.

Here is a working example;

$('#search').on('input', function(e) {  if('' == this.value) {    alert('Please enter a search criteria!');  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="search" name="search" id="search" placeholder="Search..." />

Are there any events available for the reset option for input search?

No, it's not possible. This UI interaction is some goodness that webkit implements, but is not actually specced. See here. So even if it were possible--you can't expect this UI to be implemented in Gecko, for example, if and when they ever add type=search.

How to hide search results when clearing out in the input search box? JavaScript Only Please

You can achieve this by adding this three lines:

let status = query === "" ? "none" : "block" //If input value is empty, set to "none"
document.querySelector("#myUL").style.display = status;
document.querySelector("#myUL2").style.display = status;

This will hide both of your divs whenever your input is empty. Otherwise, it will always be shown.

Look at the new example:

function myFunction() {  var query = document.querySelector('#myInput').value;
  // this wil grab all <li> elements from all <ul> elements on the page  // however, you will want to specify a unique attribute for only the elements you wish to include  var elements = document.querySelectorAll('li');
  let status = query==="" ? "none" : "block"  document.querySelector("#myUL").style.display = status;  document.querySelector("#myUL2").style.display = status;
  for (var i = 0; i < elements.length; i++) {    var el = elements[i];    if (el.innerText.indexOf(query) !== -1)      el.style.display = 'block';    else      el.style.display = 'none';  }
}

#myInput {  background-image: url('/css/searchicon.png');  background-position: 10px 12px;  background-repeat: no-repeat;  width: 100%;  font-size: 16px;  padding: 12px 20px 12px 10px;  border: 1px solid #ddd;}
#myUL,#myUL2 {  list-style-type: none;  padding: 0px;  margin: 0px;  margin-top: 10px;}
#myUL li,#myUL2 li {  list-style-type: none;  border: 1px solid #ddd;  padding: 5px;  background-color: #f6f6f6;  text-decoration: none;  font-size: 18px;  color: black;  margin-bottom: 5px;}
#myUL li,#myUL2 li {  display: none;}
#myUL li a:hover:not(.header),#myUL2 li a:hover:not(.header) {  background-color: #eee;}

<h2>  Test Search</h2><p>  How to hide the List items from Search Filter, when search input field is cleared?</p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search" autocomplete="off"><ul id="myUL" class="ul1">  <li><a href="#">bob</a>    <div>      description    </div>    <div>      another description    </div>  </li>  <li><a href="#">rob</a> ss</li>  <li><a href="#">tom</a></li>  <li><a href="#">mark</a></li></ul><ul id="myUL2" class="ul2">  <li><a href="#">purse</a></li>  <li><a href="#">cat</a></li>  <li><a href="#">pencil</a></li>  <li><a href="#">sharpner</a></li></ul>