ahmetkucukoglu / jquery.smartsearch

Smart Search for jQuery

What is Smart Search?

Smart Search allows to search the tables of columns.

How to use?

Firstly jQuery and Smart Search adds to the page.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.smartsearch.min.js"></script>

Later it can html add and do configurations.

<input name="txtSearch" id="txtSearch" value="" />

<table id="reservationTable">
    <thead>
        <tr>
            <th>Hotel</th>
            <th>C-IN</th>
            <th>C-OUT</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-search="true" data-override="Hotel 1"><a href="#">Hotel 1</a></td>
            <td data-search="true">01.06.2014</td>
            <td data-search="true">01.07.2014</td>
            <td>Turkey</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td data-search="true" data-override="Hotel 2"><a href="#">Hotel 2</a></td>
            <td data-search="true">01.07.2014</td>
            <td data-search="true">01.08.2014</td>
            <td>Turkey</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td data-search="true" data-override="Hotel 1"><a href="#">Hotel 1</a></td>
            <td data-search="true">05.06.2014</td>
            <td data-search="true">15.07.2014</td>
            <td>Egypt</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td data-search="true" data-override="Hotel 2"><a href="#">Hotel 2</a></td>
            <td data-search="true">01.06.2014</td>
            <td data-search="true">01.07.2014</td>
            <td>Turkey</td>
        </tr>
    </tbody>
</table>

$("#reservationTable tbody").smartsearch({
    searchColumn: "[data-search]",
    searchInput: "#txtSearch",
    selectedClass: "smart-search-select",
    endSearchRow: function (tbody, notFoundColumnCount) {
        if (notFoundColumnCount == 3) {
            tbody.hide();
        }
        else {
            tbody.show();
        }
    },
    endSearch: function () {
        //Logic
    }
});

Properties
Property Name	Description
searchColumn	This property is need to search on which column
searchInput	This property is need for search keyword
selectedClass	If keyword can find, this class applies to column
Events
Event Name	Description
endSearchRow	When search completed for each row, this event calls
endSearch	When search completed, this event calls