JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<input type="text" id="search-list" value="" placeholder="Search" class="search-query">

<ul id="filter-list" class="list-items"><li data-from="#interaction-task-list-container" data-target="#interaction-task-premisis-container" data-modetorender="premises" data-building-id="752781" data-address-id="" class="select-this cursor">DOUGLASS LANE</li><li data-from="#interaction-task-list-container" data-target="#interaction-task-premisis-container" data-modetorender="premises" data-building-id="818567" data-address-id="" class="select-this cursor">GEORGE STREET</li><li data-from="#interaction-task-list-container" data-target="#interaction-task-premisis-container" data-modetorender="premises" data-building-id="956363" data-address-id="" class="select-this cursor">LIVERPOOL STREET</li><li data-from="#interaction-task-list-container" data-target="#interaction-task-premisis-container" data-modetorender="premises" data-building-id="1005556" data-address-id="" class="select-this cursor">SUSSEX STREET</li></ul>

JavaScript

$(function(){
 
 $('#search-list').on('keyup', function (e) {
               filterList($(this), '#filter-list');
 });
 
 
 });
 
 
 
 
 function filterList (inputEl, targetEl) {
        var value = null,
            type = null;

        // determine if object OR string
        if ($.type(inputEl) === 'string') {
            value = inputEl;
        } else if ($.type(inputEl) === 'object') {
            value = inputEl.val();
        }

        // determine if target is a string, if so, convert to $obj
        if ($.type(targetEl) === 'string') {
            targetEl = $(targetEl);
        }

        // determine what kind of target we are dealing with table=1, LI = 2
        if (targetEl.find('tr').length > 0) {
            type = 1;
        }
        if (targetEl.find('li').length > 0) {
            type = 2;
        }


        // recalc value string
        value = value.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });


        if (type === 1) {
            if (!value)
                targetEl.find('> tbody tr').show();
            else {
                var sRows = targetEl.find('> tbody');
                sRows.find('tr:not(:contains(' + value + '))').hide();
                sRows.find('tr:contains(' + value + ')').show();
                targetEl.addClass('searched');
            }
        }

        if (type === 2) {
            if (!value)
                targetEl.find(' >  li').show();
            else {
                targetEl.find(' > li:not(:contains(' + value + '))').hide();
                targetEl.find(' > li:contains(' + value + ')').show();
                targetEl.addClass('searched');
            }
        }

    },