How to do a search by input text of html?

Question

How to do a search by input text of html?

Navigation

#1 by (0 votes)

0

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

EXAMPLE: A cafeteria system, where you start typing "COX" and you will see all the options that start with these letters, such as 'coxinha', 'chicken coxinha', 'chicken coxinha con catupiri' and the like ... Or even just typing the ID of the option that the person wants and already falls into the product ..

What do I need? How to do this?

javascript java jquery html5

asked by anonymous 29.03.2017 / 22:09

1 answer

how to make VBA interact with more than one tab in Internet Explorer? Lock DataGridView Changes

score 0 · Answer 1

You must have a input with id='search_input' , for example, where you can enter the name or product ID. Then you have a table where all the products are and their respective ID's, in this case I gave a id='tabela-produtos' to 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 input , convert the case to lowercase (if applicable), then run each tr of the products table and search every% match for the value / text you entered in td .

When running every input , these are hidden and only those that match the value of tr are shown.