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.

[mitsukk1992]

Au temps pour moi, j'ai réussi en intégrant ma classe "data-search-term" directement dans les div à afficher ou non :

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
 
        $('#liste-entreprises-modal .item').each(function() {
            var str = $(this).attr('class').split("display-")[1].toLowerCase();
            $(this).attr('data-search-term', str);
        });
 
        $('.search-input').on('keyup', function() {
            var searchTerm = $(this).val().toLowerCase();
            $('#liste-entreprises-modal .item').each(function() {
                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });

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
15
 
            <input type="text" placeholder="Que recherchez-vous ?" class="search-input w100p">
 
            <div class="item {{$active}} display-{{$company->name}}">
                <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>