Feature: add an "x"-button to clear the search box

[ronkorving]

So many search fields these days come with a little "x" button in or around them (so you don't have to refocus the search field, then backspace the search string) that I naturally expected it in the search field on Slate as well. I think it would a nice and intuitive addition if that were to actually exist.

[PreciselyAlyss]

You can see part of my attempt to do this here. The functional parts are there, it just needs some cleanup.

[regevbr]

Hi any news on that?

[regevbr]

A quick feaute impel I used here - https://squiss-ts.pruvo.com is as follow:

search.js - change the bind method as follows:

  function bind() {
    content = $('.content');
    searchResults = $('.search-results');

    function inputCallback(e) {
      var wait = function() {
        return function(executingFunction, waitTime){
          clearTimeout(timeoutHandle);
          timeoutHandle = setTimeout(executingFunction, waitTime);
        };
      }();
      wait(function(){
        search(e);
      }, searchDelay );
    }
    $('#input-search').on('search',inputCallback);
    $('#input-search').on('keyup',inputCallback);
  }

layout.erb - change the search div as follows:

        <div class="search">
          <input type="search" class="search" id="input-search" placeholder="Search">
        </div>

_normalize.css - remove the following:

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}