jquery

Je vous propose dans ce tuto de faire une recherche dans un array Json, à ce jour j’utilise deux méthodes, la première étant ma préférée.

Méthode 1 : Jquery.grep

var locs = [{ "id": 1, "text": "Chien" }, { "id": 2, "text": "Chat" }];

$(document).ready(function () {

   var idSearch = 1;
   var item = jQuery.grep(locs, function (n, i) {
      return (n.id == idSearch);
   }, false);
   if (item.length > 0) {
      var textClicked = item[0].text;
      console.log(textClicked);
   }
));

var locs = [{ "id": 1, "text": "Chien" }, { "id": 2, "text": "Chat" }];

$(document).ready(function () {

var idSearch = 1;

var item = jQuery.grep(locs, function (n, i) {

return (n.id == idSearch);

}, false);

if (item.length > 0) {

var textClicked = item[0].text;

console.log(textClicked);

}

));

On va chercher la ligne qui correspond à locs[n].id == 1, si on trouve on extrait le array qui correspond à la requête. Bien entendu si on trouve plusieurs enregistrements (item.length > 1) il faudra faire un for each afin d’afficher tous les enregistrements trouvés.

Méthode 2 : $.each

var locs = [{ "id": 1, "text": "Chien" }, { "id": 2, "text": "Chat" }];

$(document).ready(function () {

   var idClicked = 1;

   $.each(locs, function (i, v) {
      if (v.id == idClicked) {
         var textClicked = locs[i].text;
         console.log(textClicked);
         return false; // stop the loop
      }
   });

});

var locs = [{ "id": 1, "text": "Chien" }, { "id": 2, "text": "Chat" }];

$(document).ready(function () {

var idClicked = 1;

$.each(locs, function (i, v) {

if (v.id == idClicked) {

var textClicked = locs[i].text;

console.log(textClicked);

return false; // stop the loop

}

});

Cette méthode permet de trouver le premier enregistrement correspond à la recherche. Pour obtenir les mêmes avantages que la première méthode il faut créer un item, stocker le résultat dans ce dernier et inhiber la sortie du loop. Plus long à traiter car on scrute tous les enregistrements dans ce cas …

Remplir un select2 via un Json, rien de plus simple en quelques lignes :

<html>
<head>
    <meta charset="utf-8" />
    <title>JQuery select2 - remplissage auto</title>
    <!-- Jquery -->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <!-- Select 2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>

    <p>Animal préféré :</p>
    <select id="idAnimal" class="select2"><option value="0">Animal ?</option></select>

</body>
</html>

<script>

    // init Json
    var locs = [];  
    // remplissage JSon, se réalise généralement via Ajax, dans ce cas je le fais en manuel
    item = {};
    item["id"] = 1;
    item["text"] = "Chien";
    locs.push(item);
    item = {};
    item["id"] = 2;
    item["text"] = "Chat";
    locs.push(item);
    // ça nous donne :
    // locs = [{"id":1, "text":"chien"},{"id":2, "text":"chat"}];

    $(document).ready(function () {

        // remplissage du select désiré
        $('#idAnimal').select2({            
            data: $.map(locs, function (a) {
                return {
                    "id": a.id,
                    "text": a.text
                }
            })
        });      
        // style global de tous les select 
        $("select").select2({
            width: '100%',
            allowClear: false,
        })
    });

</script>

<html>

<head>

<title>JQuery select2 - remplissage auto</title>

</head>

<body>

<p>Animal préféré :</p>

<select id="idAnimal" class="select2"><option value="0">Animal ?</option></select>

</body>

</html>

// init Json

var locs = [];

// remplissage JSon, se réalise généralement via Ajax, dans ce cas je le fais en manuel

item = {};

item["id"] = 1;

item["text"] = "Chien";

locs.push(item);

item = {};

item["id"] = 2;

item["text"] = "Chat";

locs.push(item);

// ça nous donne :

// locs = [{"id":1, "text":"chien"},{"id":2, "text":"chat"}];

$(document).ready(function () {

// remplissage du select désiré

$('#idAnimal').select2({

data: $.map(locs, function (a) {

return {

"id": a.id,

"text": a.text

}

})

});

// style global de tous les select

$("select").select2({

width: '100%',

allowClear: false,

})

});

</script>

Bien entendu il faut en entête appeler jquery et la bibliothèque de Select2 :

https://select2.org/getting-started/installation
https://code.jquery.com/

Astuces select2

Select2 est prédéfini avec les valeurs id et text, si vous créez votre Json avec ces deux identifiants on peut simplifier le remplissage du select par :

$('#idAnimal').select2({            
   data: locs
});

$('#idAnimal').select2({

data: locs

});

Vous souhaitez changer la valeur du select en sélectionnant une valeur, Jquery répond à ce besoin :

// change select id
$("#idAnimal").val(1).change();

1 2	// change select id $("#idAnimal").val(1).change();

Vous souhaitez récupérez la valeur du select en automatique sur changement du select (j’ai utilisé .each si vous avez un Json complexe et souhaitez retrouver des informations complémentaires) :

$("#idAnimal").on("change", function () {

   var idClicked = this.value; // retrieve Id selected

   $.each(locs, function (i, v) {
      if (v.id == idClicked) {
         var textClicked = locs[i].text;
         console.log(textClicked); // display text
         return false; // stops the loop
      }
   });
});

$("#idAnimal").on("change", function () {

var idClicked = this.value; // retrieve Id selected

$.each(locs, function (i, v) {

if (v.id == idClicked) {

var textClicked = locs[i].text;

console.log(textClicked); // display text

return false; // stops the loop

}

});

Résultat via CodePen :
https://codepen.io/laurent-zminka/pen/WNojyxN

Actualités, interventions et astuces en hébergement

jquery

Jquery – Json : cherche Lycos !

Méthode 1 : Jquery.grep

Méthode 2 : $.each

Jquery – Select2 : auto remplissage depuis Json

Astuces select2