Dynamic search with JSON - PHP - MYSQL

Question

I’ve been looking on the internet but I couldn’t find any references, maybe because I was searching wrong, so I resorted to create this post.

I have a query in the database (Mysql with PHP) that returns me a listing of products with several features (name, value, category, type, composition, etc), and this listing is shown to the user on the screen.

On the left side we have filters, which are these features of the products listed initially, would like that:

1 - the user when selecting a filter, the search result is redone taking into account that selected filter, BUT WITHOUT GOING TO SEARCH THE INFORMATION AGAIN IN THE DATABASE, ie, work with the result that is already on the user screen.

I know that for this it is necessary to create a JSON object and manipulate the information that is inside it, as the filters that are selected, but convert the result od PHP to the JSON object smoothly (json_enconde / json_decode)but the problem is how to search inside this object in order to show the results with filters.

I don’t want to search the information again in the database because if this happens, I will have many queries and the response time can be high for the user.

If anyone has any light to love help, or has already made some similar code and can help me thank you.

Thank you all

Answer 1

This can be done in different ways. I leave an example:

var restaurants = [{"name": "McDonald's"}, { "name": "KFC" }, { "name": "Pizza Hut" }, { "name": "Dominos" }, { "name": "Popeyes" }];

function mostrar(arr) {
    var lista = $('#lista'); // coloquei em cache aqui para não ter $('#lista').append() dentro do loop
    lista.html(''); // para limpar antes de voltar a colocar a lista

    arr.forEach(function (rest) {
        lista.append('<div>' + rest.name + '</div>');
    });
}
$('#busca').on('keyup', function () {
    var busca = this.value;
    var filtrados = restaurants.filter(function (rest) {
        return rest.name.toLowerCase().indexOf(busca) != -1;
    });
     mostrar(filtrados);
});
mostrar(restaurants); // para iniciar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Escreva uma letra de um dos nomes para filtrar...

<input type="text" id="busca" />
<div id="lista"></div>

This code looks for the keyup to detect user input. It could be a click on a div as well. Then compare the input value with all objects in the array and remove those that do not have that letter/word in the name. Ai calls the function to show the results by passing the already filtered array.