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>

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.



代码整理:站长图库