Discussion :

[mitsukk1992]

Bonjour,

Je souhaite effectuer une recherche en temps réel sur une liste de div que j'affiche en fonction des résultats de ma base de données.

J'ai donc ce bloc de recherche :



Qui est affiché via ce code (c'est un template blade en Laravel) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            <input type="text" placeholder="Que recherchez-vous ?" class="search-input w100p search-company">
 
            <div class="item {{$active}} {{$company->virtual_id}}">
                <input type="checkbox" id="check-{{$company->virtual_id}}" class="company-value" name="chk" value={{$company->virtual_id}} {{$checked}}>
                <label for="check-{{$company->virtual_id}}">
                        <span class="to-display-in-filter raison-sociale">{{$company->name}}</span> <span class="enseigne">{{--Enseigne--}}</span><br>
                        <span class="siret">Numéro de siret</span><span class="numero-adherent">{{$company->siret}}</span><br>
                        <span class="adresse">{{$company->adress}}
                            @isset ($company->adress_extra) <br>{{$company->adress_extra}} @endisset
                            <br>{{$company->postal_code}}
                            @isset ($company->town) {{$company->town}} @endisset
                        </span>
                </label>
            </div>

Ce code ci en Jquery fonctionne si j'ai une seule donnée sortante de ma base de données :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
        $('.to-display-in-filter').each(function() {
            $(this).attr('data-search-term', $(this).text().toLowerCase());
        });
 
        $('.search-company').on('keyup', function() {
            var searchTerm = $(this).val().toLowerCase();
            $('.to-display-in-filter').each(function() {
                var companyValue = '.' + $('.company-value').val();
                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                    $(companyValue).show();
                } else {
                    $(companyValue).hide();
                }
            });
        });

Mais il ne fonctionne pas si j'ai plusieurs div, il prend en compte seulement la dernière div est applique la recherche sur cette dernière.

Je me sert de la value de mon input (la checkbox) que je copie sur mes div et j'affiche ou non la div correspondant à la recherche que je tape ; j'affiche ou non la div correspondant à l'id.

Merci pour vos réponses.