Hledání v datech s jQuery

by Petr Haluza

HTML

<span>Hledat:</span> <input type="text" id="txtSearch" name="txtSearch" maxlength="50" />&nbsp;
    <span id="CancelSearch" alt="Zrušit hledání" title="Zrušit hledání" style="width:150px;width:14px;height:14px;">Zrušit hledání</span>

<p>
<a class="kraj-filtr" data-filter="all">vše </a>
<a class="kraj-filtr" data-filter="zone1">zone1 </a>
<a class="kraj-filtr" data-filter="praha">Hlavní město Praha
<a class="kraj-filtr" data-filter="sc">Středočeský
<a class="kraj-filtr" data-filter="vys
<a class="kraj-filtr" data-filter="jm
<a class="kraj-filtr" data-filter="zli
<a class="kraj-filtr" data-filter="ms
<a class="kraj-filtr" data-filter="olo
<a class="kraj-filtr" data-filter="par
<a class="kraj-filtr" data-filter="lib
<a class="kraj-filtr" data-filter="kar
<a class="kraj-filtr" data-filter="jc
</p>

<ul id="tblSearch" cellpadding="2" cellspacing="0" border="1" style="width:500px;">

<li data-kraj="zone1"><span class="p-name">Spel - elektro s.r.o.</span><span class="p-street">Pod Hájem 98</span><span class="p-city">26701 Králův Dvůr</span><a href="mailto">[email protected]</a></li>
<li data-kraj="zone2"><span class="p-name">Jan Bursa</span><span class="p-street">Vrátkov 125</span><span class="p-city">Český Brod</span><a href="mailto">[email protected]</a></li>
<li data-kraj="zone3"><span class="p-name">ITNET spol. s r.o.</span><span class="p-street">třída Kpt. Olesinského 69</span><span class="p-city">26101 Příbram</span><a href="mailto">[email protected]</a></li>
<li data-kraj="zone4"><span class="p-name">Tomáš Hocek</span><span class="p-street">U Zastávky 87</span><span class="p-city">25066 Zdiby</span><a href="mailto">[email protected]</a></li>
<li data-kraj="zone1"><span class="p-name">Spel - elektro s.r.o.</span><span class="p-street">Pod Hájem 98</span><span class="p-city">26701 Králův Dvůr</span><a href="mailto">[email protected]</a></li>
<li data-kraj="zone3"><span class="p-name">ITNET spol. s r.o.</span><span class="p-street">třída Kpt. Olesinského 69</span><span...

JavaScript

jQuery.expr[":"].containsNoCase = function (el, i, m) {
        var search = m[3];
        if (!search) return false;
        return eval("/" + search + "/i").test($(el).text());
    };

    jQuery(document).ready(function () {
    		// tlačítko zrušit+fnkce
        jQuery('#CancelSearch').hide();
        jQuery('#CancelSearch').click(function () {
            resetSearch();
        });
        jQuery('#txtSearch').keyup(function (event) {
            if (event.keyCode == 27) {
                resetSearch();
            }
        });

        // hledat
        jQuery('#txtSearch').keyup(function () {
            if (jQuery('#txtSearch').val().length > 0) {
                jQuery('#tblSearch li').hide();
                // ukaž jen s obsahem*
                jQuery('#tblSearch li span:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show();
                jQuery('#CancelSearch').show();
            }
            else if (jQuery('#txtSearch').val().length == 0) {
                resetSearch();
            }

            if (jQuery('#tblSearch li:visible').length == 0) {
                jQuery('.norecords').remove();
                jQuery('#tblSearch').append('<li class="norecords"><span>No records were found</span></li>');
            }
        });
    });

    function resetSearch() {
        // clear the textbox
        jQuery('#txtSearch').val('');
        // show all table rows
        jQuery('#tblSearch li').show();
        // remove any no records rows
        jQuery('.norecords').remove();
        // remove the cancel search image
        jQuery('#CancelSearch').hide();
        // make sure we re-focus on the textbox for usability
        jQuery('#txtSearch').focus();
    }
    
    $(document).ready(function () {
            var filterVal;
            $(".kraj-filtr").on("click", function () {
                filterVal = $(this).attr("data-filter");
                updateView();
            });

            function updateView() {
       ...