stearch

Funny name for - String Search. Javascript based DOM client search. A function which hides html elements (divs, table rows, table cells, spans) which do not match the string which is entered in a field.

###Check demo

##Usage and implementation

Add the stearch() to any event handler to trigger the search mechanism, which will filter out all results that do not match, and display the ones that do.

If you want a search field that has a div structure and a 'search' button, use the follwing example:

	<input type="text" placeholder="search me" id="search_employee" />
	<button onclick="stearch('employees', 'search_employee', 'row', 'block')">search</button>
    <div id="employees">
      <div>
        <div class="head">Name</div><div class="head">Class</div><div class="head">Points</div>
		<div class="clear"></div>
      </div>
      <div>
        <div class="row"><div class="data_cell">Jumpy</div><div class="data_cell">dog</div><div class="data_cell">211</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Squeeky</div><div class="data_cell">cat</div><div class="data_cell">252</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Tom</div><div class="data_cell">cat</div><div class="data_cell">321</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Jerry</div><div class="data_cell">mouse</div><div class="data_cell">476</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Rex</div><div class="data_cell">dog</div><div class="data_cell">421</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Chewy</div><div class="data_cell">mouse</div><div class="data_cell">421</div><div class="clear"></div></div>
        <div class="row"><div class="data_cell">Purry</div><div class="data_cell">cat</div><div class="data_cell">653</div><div class="clear"></div></div>
      </div>
    </div>

If you want a search field that will update a filter on each keypress, use the following example:

    <input type="text" placeholder="search me" onkeyup="stearch('myTable', this)" />
    <table id="myTable">
      <thead>
        <tr><td>Name</td><td>Gender</td><td>Age</td></tr>
      </thead>
      <tbody>
        <tr class="searchable_row"><td>John Smith</td><td>male</td><td>21</td></tr>
        <tr class="searchable_row"><td>Ben Hardey</td><td>male</td><td>25</td></tr>
        <tr class="searchable_row"><td>Olivia Green</td><td>female</td><td>22</td></tr>
      </tbody>
    </table>

If you want a search field with a 'search' button, use the following example:

	<input type="text" placeholder="search me" id="query_field" />
	<button onclick="stearch('myTable2', 'query_field')">search</button>
    <table id="myTable2">
      <thead>
        <tr><td>Name</td><td>Gender</td><td>Age</td></tr>
      </thead>
      <tbody>
        <tr class="searchable_row"><td>Greg Burrow</td><td>male</td><td>26</td></tr>
        <tr class="searchable_row"><td>Smith Johnson</td><td>male</td><td>21</td></tr>
        <tr class="searchable_row"><td>Petra Reece</td><td>female</td><td>32</td></tr>
        <tr class="searchable_row"><td>Veronica Baker</td><td>female</td><td>26</td></tr>
        <tr class="searchable_row"><td>Maria Vera</td><td>female</td><td>27</td></tr>
      </tbody>
    </table>

##stearch(elementid, inputid [,classname, displaymode]) Type: Function()

Arguments: the one on [..] are optional, and will be replaced with default values if not provided.

###elementid type:String

This is the id of the holder or wrapper, which holds the children which will be checked. For example, if you have a field which will searching in a table, this will be the id of the table.

###inputid Type:String or Object

This is the id of the field which will provide the query. So this is the actuall search box. If the stearch function is attached to a onkeyup, onkeydown or onchange event handler, this argument can be this instead of an id. You should provide an id when the stearch is triggered from a button, and this when the user searches with a button.

###[classname] Type:String

Default value:'searchable_row'

This is the name of the class that is assigned to all elements which will be searched. For example if you are searching in a table, every row that you want to be searched can have a class (ie. 's_row') and this class name can be passed to the function arguments. The defualt value is 'searchable_row'.

###[displaymode] Type:String

Default value:'table-row'

This is the css value of the display property which will be added to all rows that match or do not match when the search iterates through the structure of the desired holder.