Submit your widget

jQuery Safari Searcher

Created 9 years ago   Views 20274   downloads 5403    Author egorkhmelev
jQuery Safari Searcher
View DemoDownload 52.2 KB
159
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>