Discussion :

[runner77]

Bonjour,

J'utilise dans le cadre d'un développement d'une application la bibliothèque Chosen sur mes listes déroulantes afin d'avoir une prè-saisie.
Sauf que pour certaines listes j'ai tellement de données (et ce n'est pas près de s'arrêter) que la page met énormément de temps à charger et quand je clique dans cette liste pour faire une recherche cela rame énormément et je ne suis qu'en local pour le moment :/

Je cherche donc soit à limiter le nombre d'élément afficher au chargement de la page puis lors de la pré-saisie.

Soit à utiliser à l'aide JQuery une requête me permettant de charger les élément contenant seulement les éléments pré-saisie.

Pour la première solution j'ai trouvé sur l'API (https://harvesthq.github.io/chosen/options.html) l'option "max_shown_results" mais quand je l'utilise elle ne fonctionne pas j'ai toujours toutes les infos de ma liste au chargement de la page et idem quand je commence à saisir.

Code PHP :

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
17
18
19
20
21
22
23
24
25
26
27
28
<label for="id_admin_facture" class="col-sm-5 col-md-6 col-lg-5 col-xl-3 col-form-label col-form-label-sm">Numéro de facture *</label>
        <div class="col-sm-3 col-md-7 col-lg-3 col-xl-3">
            <div class="input-group input-group-sm">
                <select id="id_admin_facture" class="form-control chosen-select custom-select custom-select-sm test" name="id_admin_facture" onChange="rafraichi_contenu_avoir_suivant_facture( this.value );">
                    <option value="">-</option>
<?php
                while( $tab_resultat_liste_facture_existante = mysqli_fetch_assoc( $result_liste_facture_existante ) )
                {
                    $tmp_id_admin_facture       = $tab_resultat_liste_facture_existante[ 'id_admin_facture'         ];
                    $tmp_numero_admin_facture   = $tab_resultat_liste_facture_existante[ 'numero_admin_facture'     ];
 
                    if( $tmp_id_admin_facture == $var_id_admin_facture )
                    {
?>
                        <option value="<?php echo $tmp_id_admin_facture; ?>" selected><?php echo $tmp_numero_admin_facture; ?></option>
<?php
                    }
                    else
                    {
?>
                        <option value="<?php echo $tmp_id_admin_facture; ?>"><?php echo $tmp_numero_admin_facture; ?></option>
<?php
                    }
 
                }
?>
                </select>
            </div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
		        var config = 
		        {
		    		'.chosen-select'           : {max_selected_options: 50},
		            '.chosen-select-deselect'  : {allow_single_deselect:true},
		            '.chosen-select-no-single' : {disable_search_threshold:10},
		            '.chosen-select-no-results': {no_results_text:'Aucun résultat trouvé'},
		            '.chosen-select-width'     : {width:"100%"}
		        }
		        for( var selector in config ) 
		        {
		            $(selector).chosen(config[selector]);
		        }
 
    		</script>

Pour ce qui est de la deuxième solution j'ai exploré des solutions sur le web mais rien n'a fonctionné il me faudrait à la la limite juste à trouver le "Triggered Events" qui me permettrait de lancer une fonction AJAX pour rafraichir cette liste avec les éléments saisie mais celle disponible ne semble pas faite pour ce déclencher quand l'on commence à saisir.

Merci par avance pour votre aide.

Nicolas

[runner77]

Bonjour,

Je suis parvenu avec de la persévérance à limiter mon nombre de choix dans mes listes.
Ma déclaration de fonction étais mal faite, je comprends mieux aussi pourquoi mon "no_results_text" ne fonctionnait pas non plus XD
Voici la solution pour ceux qui chercherai comme moi.

Code HTML :

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

1
2
3
4
5
6
7
8
<select class="form-control chosen-select custom-select custom-select-s">
          <option>Select Option</option>
          <option>1</option>
          <option>12</option>
          <option>13</option>
          <option>14</option>
          <option>...</option>
        </select>

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
		        $(".chosen-select").chosen({
                    no_results_text: "Aucun résultat n'a été trouvé",
                    max_shown_results: 100
                });
 
    		</script>