Submit your widget

jQuery Safari Searcher

Created 13 years ago   Views 11459   downloads 2439    Author egorkhmelev
jQuery Safari Searcher
View DemoDownload
111
Share |

I want to share my jQuery search box plugin looks like Safari one. It is really easy to customize skin by drawing new sprite. Moreover, it have all the same functionality as a real one and a bit more — incremental search with loader. I hope it would help to you guys. Below some demos and examples of usage.

Simple search:

<div style="width: 200px"> <!-- ← Define searcher width by setting width to parent node.-->
  <input id="SimpleSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
  />
</div>
<script type="text/javascript" charset="utf-8">
  $("#SimpleSearcher").searcher();
</script>

Incremental search:

<div style="width: 200px">
  <input id="IncrementalSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
 
    incremental="yes"
    onsearch="onSearchHandler.apply(this, arguments)"
 
  />
</div>
<script type="text/javascript" charset="utf-8">
  $("#IncrementalSearcher").searcher();
  function onSearchHandler(){
    this.loading(true);
    /* AJAX or simple JavaScript actions */
  }
</script>

Getting Search Object

<script type="text/javascript" charset="utf-8">
  $("#IncrementalSearcher").data("SearchHandler").onsearch = function(){ /* whatever */ };
</script>