How to search for the html input text?

Question

I want to do something like Google, where you start typing and will appear the list of options according to what you entered, where these options are already registered in the database...

EXAMPLE: A cafeteria system, where begins to type "COX" and already appear all the options that begin with these letters, as 'coxinha', 'coxinha de frango', 'coxinha de frango com catupiri' and related... Or even typing only the ID of the option that the person wants and already falls in the product..

What is necessary? How to do this?

Answer 1

You gotta have a input with id='search_input', for example, where you can enter the product name or ID. Then you have a table where are all the products and their respective ID’s, in this case I gave a id='tabela-produtos' at the table.

$('#search_input').bind('keyup click change',function(){
    search = $(this).val().toLowerCase();
    var re = new RegExp(search, 'g');

    $('#tabela-produtos tbody tr').each(function(){
        $(this).hide();
        target = $(this).find('td').text().toLowerCase();
        if(target.match(re) || target.match('^' + search)){
            $(this).show();
        }
    });
});

In this case, the code will fetch the value you enter in the input, convert capital letters to lower case letters (if applicable), then run each tr of the product table and search in each td a match to the value/text you entered in input.

By running each tr, these are hidden and only those that match the value of the input.