• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Advies search met filter

Status
Niet open voor verdere reacties.
E

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
Voor een website wil ik deze codepen gebruiken. Aan deze search met filter zou ik graag een element toevoegen uit deze codepen. Namelijk wanneer je op het inputveld klikt, de lijst pas zichtbaar wordt. Ik ben er al een tijdje mee bezig, maar ik krijg het (nog) niet werkend. Iemand een suggestie hoe ik dit effect kan toevoegen aan het eerste codepen-voorbeeld?
 
Dat ziet er inderdaad bruikbaar uit. Hoe sluit ik de "content" dan weer zodra ik naast het inputfield klik?
 
Ik zou 'm zo maken. Maar heel makkelijk was hij niet. Ik heb de onveranderde css verder weggelaten.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mini-Searchfilter</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <style>


        #list li {
            margin: 0em;
            padding: 0em;
            visibility: hidden;
            -webkit-transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
            -moz-transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
            -o-transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
            transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
        }

    </style>
    <script>
        $(document).ready(function () {

            // wordt er op de html geklikt
            $("html").click(function (e) {

                if (!$(e.target).is('#search-text') && !$(e.target).is('#list li')) { // zolang er niet op search box wordt geklikt of op een van de list items
                    $("#list li").css({ "margin": "0em", 'padding': '0em' }); // worden margin en padding verkleind
                    setTimeout(function () {
                        $('#list li').css({ "visibility": "hidden" });
                    }, 300); // 300 ms later moet de hele list verdwijnen
                }
            });

            $("#search-text").focus(function () { // wordt er gefocused op de search box
                $("#list li").css({ "margin": "0.2em 0", 'padding': '0.5em 0.8em', 'visibility': 'visible'}); // dan worden margin en padding vergroot plus visibility dus verschijnt de list
            });

            var jobCount = $('#list .in').length;
            $('.list-count').text(jobCount + ' items');


            $("#search-text").keyup(function () {

                var searchTerm = $("#search-text").val();
                var listItem = $('#list').children('li');


                var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
                //extends :contains to be case insensitive
                $.extend($.expr[':'], {
                    'containsi': function (elem, i, match, array) {
                        return (elem.textContent || elem.innerText || '').toLowerCase()
                            .indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });


                $("#list li").not(":containsi('" + searchSplit + "')").each(function (e) {
                    $(this).addClass('hiding out').removeClass('in');
                    setTimeout(function () {
                        $('.out').addClass('hidden');
                    }, 300);
                });

                $("#list li:containsi('" + searchSplit + "')").each(function (e) {
                    $(this).removeClass('hidden out').addClass('in');
                    setTimeout(function () {
                        $('.in').removeClass('hiding');
                    }, 1);
                });


                var jobCount = $('#list .in').length;
                $('.list-count').text(jobCount + ' items');

                //shows empty state text when no jobs found
                if (jobCount == '0') {
                    $('#list').addClass('empty');
                }
                else {
                    $('#list').removeClass('empty');
                }
            });
        });
    </script>
</head>
<body>
    <div class="deco topdeco">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <h1>Basic jQuery search/filter</h1>
    <h3>
        a quick and dirty jquery search
    </h3>

    <section class="list-wrap">

        <label for="search-text">Search the list</label>
        <input type="text" id="search-text" placeholder="search" class="search-box">
        <span class="list-count"></span>


        <ul id="list">
            <li class="in">Apple pie</li>
            <li class="in">Pumpkin pie</li>
            <li class="in">Banana-creme pie</li>
            <li class="in">Peach-blackberry cobbler</li>
            <li class="in">Chocolate-strawberry torte</li>
            <li class="in">Chocolate-zucchini cake</li>
            <li class="in">Anything involving chocolate and mint</li>
            <li class="in">Red-velvet cake</li>
            <li class="in">Anything involving fruits that aren't cherries</li>
            <span class="empty-item">no results</span>
        </ul>
    </section>
</body>
</html>
 
Ik heb nog een andere, die is alweer beter (vind ik).

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mini-Searchfilter-height</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <style>

        #list li {
            margin-left: 0.2em 0;
            margin-right: 0.2em 0;
            margin-top: 0em;
            margin-bottom: 0em;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            padding-left: 0.8em;
            padding-right: 0.8em;
            height: 0px;
            visibility: hidden;
            -webkit-transition: height 0.7s ease-in-out, margin-top 0.7s ease-in-out, margin-bottom 0.7s ease-in-out,padding-top 0.7s ease-in-out, padding-bottom 0.7s ease-in-out;
            -moz-transition: height 0.7s ease-in-out, margin-top 0.7s ease-in-out, margin-bottom 0.7s ease-in-out,padding-top 0.7s ease-in-out, padding-bottom 0.7s ease-in-out;
            -o-transition: height 0.7s ease-in-out, margin-top 0.7s ease-in-out, margin-bottom 0.7s ease-in-out,padding-top 0.7s ease-in-out, padding-bottom 0.7s ease-in-out;
            transition: height 0.7s ease-in-out, margin-top 0.7s ease-in-out, margin-bottom 0.7s ease-in-out,padding-top 0.7s ease-in-out, padding-bottom 0.7s ease-in-out;
        }

    </style>
    <script>
        $(document).ready(function () {

            // wordt er op de html geklikt
            $("html").click(function (e) {

                if (!$(e.target).is('#search-text') && !$(e.target).is('#list li')) { // zolang er niet op search box wordt geklikt
                    $("#list li").css({ "margin-top": "0em", "margin-bottom": "0em", "padding-top": "0em", "padding-bottom": "0em","height": "0px"}); // wordt height verkleind
                    setTimeout(function () {
                        $('#list li').css({ "visibility": "hidden" });
                    }, 500); // 500 ms later moet de hele list verdwijnen
                }
            });

            $("#search-text").focus(function () { // wordt er gefocused op de search box
                $("#list li").css({ "margin-top": "0.2em 0", "margin-bottom": "0.2em 0", "padding-top": "0.5em", "padding-bottom": "0.5em", "height": "40px" }); // dan worden margin en padding vergroot plus visibility
                setTimeout(function () {
                    $('#list li').css({ "visibility": "visible" });
                }, 300); // 300 ms later moet de hele list verschijnen
            });

            var jobCount = $('#list .in').length;
            $('.list-count').text(jobCount + ' items');


            $("#search-text").keyup(function () {

                var searchTerm = $("#search-text").val();
                var listItem = $('#list').children('li');


                var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
                //extends :contains to be case insensitive
                $.extend($.expr[':'], {
                    'containsi': function (elem, i, match, array) {
                        return (elem.textContent || elem.innerText || '').toLowerCase()
                            .indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });


                $("#list li").not(":containsi('" + searchSplit + "')").each(function (e) {
                    $(this).addClass('hiding out').removeClass('in');
                    setTimeout(function () {
                        $('.out').addClass('hidden');
                    }, 300);
                });

                $("#list li:containsi('" + searchSplit + "')").each(function (e) {
                    $(this).removeClass('hidden out').addClass('in');
                    setTimeout(function () {
                        $('.in').removeClass('hiding');
                    }, 1);
                });


                var jobCount = $('#list .in').length;
                $('.list-count').text(jobCount + ' items');

                //shows empty state text when no jobs found
                if (jobCount == '0') {
                    $('#list').addClass('empty');
                }
                else {
                    $('#list').removeClass('empty');
                }
            });
        });
    </script>
</head>
<body>
    <div class="deco topdeco">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <h1>Basic jQuery search/filter</h1>
    <h3>
        a quick and dirty jquery search
    </h3>

    <section class="list-wrap">

        <label for="search-text">Search the list</label>
        <input type="text" id="search-text" placeholder="search" class="search-box">
        <span class="list-count"></span>


        <ul id="list">
            <li class="in">Apple pie</li>
            <li class="in">Pumpkin pie</li>
            <li class="in">Banana-creme pie</li>
            <li class="in">Peach-blackberry cobbler</li>
            <li class="in">Chocolate-strawberry torte</li>
            <li class="in">Chocolate-zucchini cake</li>
            <li class="in">Anything involving chocolate and mint</li>
            <li class="in">Red-velvet cake</li>
            <li class="in">Anything involving fruits that aren't cherries</li>
            <span class="empty-item">no results</span>
        </ul>
    </section>
</body>
</html>
 
Bedankt voor het meedenken, Maulem. Hier ga ik mee aan de slag!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan