How to unhide table rows with autocomplete

Question

I have an input and table like this :

<td valign="top" style = "padding: 12px 0px 0px 30px;" >  
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table style="display: none;">
            <tr>
                <td> <a href="#">apple</a> </td>
            </tr>
            <tr>
                <td> <a href="#">mango</a> </td>
            </tr>
            <tr>
                <td> <a href="url">carrot</a> </td>
            </tr>
        </table>
    </div>
</td>

I want to unhide "apple" link when the user types "app" on input and unhide "mango" link when user types "man" and so on.. I have googled this problem but I couldn't find anything satisfying. What kind of JavaScript code do I need to achieve this? Thanks.

Answer 1

You could do something like this:

Start by mapping each row of the table in an object (where the key is the text content of the row and the value is the row itself) so that you can quickly access it later. Then add an event listener to the input and when the user types something in go through the object seeing if any of its properties match the value, using the object to show/hide the elements.

let element, elements, i, input, n, tableBody;

elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
    element = tableBody.children[i];
    elements[element.textContent.trim()] = element;
}

input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);

function filterElements() {
    let key, value;
    value = input.value;
    for (key in elements) {
        if (key.match(value)) {
            elements[key].classList.add(`show`);
        } else {
            elements[key].classList.remove(`show`);
        }
    }
}

#table-body >* {
    display: none;
}

.show {
    display: block !important;
}

<td valign="top" style = "padding: 12px 0px 0px 30px;" >
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table>
            <tbody id="table-body">
                <tr>
                    <td>
                        <a href="#">apple</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">mango</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="url">carrot</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</td>