JSFiddle - React, Tailwind, and code Playground

by jonigiuro

HTML

<div class="tabcontent participants">
                        <div class="search_container">

                            <input id="participants-field" type="text" name="search" placeholder="Search participants">
                            
                        </div>
                        <div class="single_participant">
                            
                            <p class="name">Fire Penguin Disco Panda</p>
                            
                        </div>
                        <div class="single_participant">
                           
                            <p class="name">Nacho Libre</p>

                        </div>
                        <div class="single_participant">
                            
                            <p class="name">Batman Bin Superman</p>

                        </div>
                        
                    </div>

CSS

.single_participant {
    height: 40px;
    overflow: hidden;
    -webkit-transition: height 500ms ease;
    -moz-transition: height 500ms ease;
    -o-transition: height 500ms ease;
    transition: height 500ms ease;
}

.single_participant.hidden {
    height: 0;
}

JavaScript

var FilterParticipants = function(options) {
    this.options = options;
    this.participantList = [];

    this.init = function() {

        var self = this;
        //GENERATE PARTICIPANTS OPBJECT
        for(var i = 0; i < this.options.participantBox.length ; i++) {
            this.participantList.push({
                element: this.options.participantBox.eq(i),
                name: this.options.participantBox.eq(i).find('.name').text().toLowerCase()
            })
        }
        //ADD EVENT LISTENER
        this.options.searchField.on('keyup', function() {
            self.filter($(this).val());

        })
    }

    this.filter = function( string ) {
        var list = this.participantList;
        for(var i = 0 ; i < this.participantList.length; i++) {
            var currentItem = list[i];
            //COMPARE THE INPUT WITH THE PARTICIPANTS OBJECT (NAME)
            if( currentItem.name.indexOf(string.toLowerCase()) == -1) {
                currentItem.element.addClass('hidden');
            } else {
                currentItem.element.removeClass('hidden');
            }
        }
    }

    this.init();
}

var filterParticipants = new FilterParticipants({
    searchField: $('#participants-field'),
    participantBox: $('.single_participant'),
    nameClass: 'name'
});