JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
	<thead>
		<tr>
        <th>Unique ID</th>
        <th>Random ID</th>
    </tr>
	</thead>
	<tbody>
		
    <tr>
        <td>
            <div>
                <input type='text' id='' value='alEjAnDra' />
                <span></span>
            </div>
        </td>
        <td>
            <div>
                <input type='text' id='' value='442' />
                <span></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type='text' id='' value='2015' />
                <span></span>
            </div>
        </td>
        <td>
            <div>
                <input type='text' id='' value='1511542' />
                <span></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type='text' id='' value='2233' />
                <span></span>
            </div>
        </td>
        <td>
            <div>
                <input type='text' id='' value='12456' />
                <span></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type='text' id='' value='20004' />
                <span></span>
            </div>
        </td>
        <td>
            <div>
                <input type='text' id='' value='89754' />
                <span></span>
            </div>
        </td>
    </tr>
	</tbody>
</table>

JavaScript

$(document).ready(function(){
	// Write on keyup event of keyword input element
	$("#kwd_search").keyup(function(){
		// When value of the input is not blank
        var term=$(this).val()
		if( term != "")
		{
			// Show only matching TR, hide rest of them
			$("#my-table tbody>tr").hide();
            $("#my-table tbody > tr > td > div > input ").each(function(){
                if( $(this).val().toLowerCase().trim().indexOf(term ) > -1 ){
                     //alert("nose aaaaaaaa")
                    $(this).parent('div').parent('td').parent('tr').show();
                }else{
                    //alert("nose puede")
                }
            });
		}else
		{
			// When there is no input or clean again, show everything back
			$("#my-table tbody>tr").show();
		}
		
	});
});

var srt = "mundo yes si okey";
if (srt.toLowerCase().trim().indexOf("yes") >= 0){
    alert("contiene");
}else{
    alert("nocontiene");
}