JSFiddle - React, Tailwind, and code Playground

by a_miguel6687

HTML

<div id="find-advisor" class="rm-table-search">
            <div class="rm-search">
                <input id="search" type="text" placeholder="Search for RM Name or RC Name"/>
                <span id="search-button"></span>
               <div class="clear"></div>
            </div>

            <table class="table-bordered">
                <thead>
                <tr>
                    <th>RM Name</th>
                    <th>Division</th>
                    <th>RM Phone</th>
                    <th>RC Name</th>
                    <th>RC Phone</th>
                    <th>States Covered</th>
                </tr>
                </thead>
                <tbody class="rm-data">

                </tbody>
            </table>
        </div>

CSS

.rm-search input[type=text]{

    margin-bottom:10px;
    float:left;
    width:580px;
}

.rm-table-search{
    margin-top:10px;
    margin-bottom: 25px;
    min-height:500px;
}

.rm-table{
    margin-top:10px;
    margin-bottom: 25px;
    min-height:500px;
    width:1000px;

}

.table-bordered{
    border:1px solid #ccc;
    border-spacing:0;
}

.table-bordered thead{
    border-bottom:1px solid #ccc;
    background:#cecbce;
}

.table-bordered table{
    border-left:1px solid #ccc !important;
    width:600px;

}


.table-bordered th, .table-bordered td{
    width:150px;
    font-size:14px;
    padding:5px;

}


.table-bordered tbody tr:nth-child(odd){
    background:#efebef;
}


/* Contact Validator CSS*/
.error-msg{
    color:red;
    font-size:20px;
    font-weight:bold;
    text-align: center;
    border:1px solid #ccc;
}

JavaScript

var data = [{
    "RM_Name": "Russ Martin",
    "Division": "East",
    "RM_Phone": "(603) 491-1259",
    "RC_Name": "Jacob Sucoff",
    "RC_Phone": "(800) 247-4154 x3403",
    "States_Covered": "MT,VT, NH, ME  (all firms)",
    "Latitude": 46.6797995,
    "Longitude": -110.044783,
    "Coordinates": "46.6797995,-110.044783"
}, {
    "RM_Name": "Carey Fortnam",
    "Division": "East",
    "RM_Phone": "(585)-259-7394",
    "RC_Name": "Matt Wrzesniewsky",
    "RC_Phone": "(800) 247-4154 x3088",
    "States_Covered": "NY- Upstate ex Rockland County (BD, FP)",
    "Latitude": 40.7056308,
    "Longitude": -73.9780035,
    "Coordinates": "40.7056308,-73.9780035"

}];
        $.each(data, function(i, item) {
            var rm_name = item.RM_Name,division = item.Division,rm_phone = item.RM_Phone,rc_name = item.RC_Name,rc_phone = item.RC_Phone,states = item.States_Covered;

            var dataset='<tr class="'+rm_name+' '+rc_name+'"><td>'+rm_name+'</td><td>'+division+'</td><td>'+rm_phone+'</td><td>'+rc_name+'</td><td>'+rc_phone+'</td><td>'+states+'</td></tr>';

            $('.rm-data').append(dataset);
        });


    $('#search').on('keypress', function (e) {
        if(e.which == 13){
            var query = $('#search').val();

            $('.rm-data tr').hide();
            $('.error-msg').hide();

            if ($('.rm-data tr').hasClass(query)) {
                $('.rm-data tr:contains(' + query + ')').fadeIn('slow', function () {
                    $('.rm-data tr:contains(' + query + ')').slideDown().show();
                });
            }

            else {

                var error = '<div class="error-msg">Contact Not Found</div>';
                $('.rm-table-search').append(error);
                if ($('.error-msg').length == 0) {
                    $('.rm-table').append(error);
                }
                else {
                    $('.rm-table').append('');
                }

            }            
        }
    });