Egor Khmelev, , (+7 905) 707-07-39

15.11

jQuery Safari Searcher

Posted under Experiments, Interface&Interaction, Production, 4 comments

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.

Download sources


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>


Next: jQuery Slider plugin
jQuery Slider plugin

4 comments

Warrick, 2.12 at 2:18 pm

Just downloaded this nice looking plug-in. just wondering what I am meant to enter in the getting search area object to be able to search google for example.
Thanks

Bethrezen, 19.12 at 12:44 pm

Yeah! That’s what I was looking for. Thanks for this great plugin!

pol, 17.03 at 4:57 am

sweet, thanks for sharing!

Jerome Bohg, 16.04 at 2:51 am

Great work Egor. I will use this for future projects. Thanks for sharing your good work.

   

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">