Call script into a form-control

Bootstrap Studio Help
1

Hi! I have a table and have a input box for do a searches:

<input class="form-control" id="myInput" type="text" placeholder="Search.." />

with this script you can search and display some results according to what is written

$(function(){
    $("#myInput").on("keyup", function() {
        var $value = $(this).val().toLowerCase();
        $("#tabla tr:gt(0)").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf($value) > -1)
        });
    });
});

Now want to do a form-control to search certain values with:

<select class="form-control form-control-sm" id="status_rows">
        <option>Status</option>
        <option>Active</option>
        <option>Inactive</option>
        <option>Try</option>
</select>

Need help to do a script for do it. The values "Active,Inactive,Try" are into the first column.

2

It took me a bit to figure out what it was you were wanting. It appears you want to also be able to filter it by using a selectbox.

So this is the script update.

$(function(){
    $("#myInput").on("keyup", function() {
        var $value = $(this).val().toLowerCase();
        $("#tabla tr:gt(0)").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf($value) > -1)
        });
    });
    $("#status_rows").on("change", function() {
        var $value = $(this).val().toLowerCase();
        $("#tabla tr:gt(0)").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf($value) > -1)
        });
    });
});

The first part works with a text input the second one is the new one that works with a selectbox. They override each other so if you type something and then select something, which ever one you did last will override the previous.

Here is what I used for a HTML test bed in case you wanted to see what I did to test it.

<input class="form-control" id="myInput" type="text" placeholder="Search.." />
<br>
<select class="form-control form-control-sm" id="status_rows">
    <option value="Status" selected>Status</option>
    <option value="Active">Active</option>
    <option value="Inactive">Inactive</option>
    <option value="Try">Try</option>
</select>
<br>
<table id="tabla">
    <tr>
        <td>Statuses:</td>
    </tr>
    <tr>
        <td>Status</td>
    </tr>
    <tr>
        <td>Active</td>
    </tr>
    <tr>
        <td>Inactive</td>
    </tr>
    <tr>
        <td>Try</td>
    </tr>
<table>

I hope the forum doesn't munch the HTML code :)

Saj