Discussion :

[Trebor]

Bonjour à tous,

J'ai une application sous laravel 9 dans laquelle j'utilise Livewire.

J'ai un formulaire qui contient 2 champs (INPUT et SELECT). Dans mon "SELECT", j'utilise la librairie "select2" pour créer un champ de recherche.

Je souhaiterais que lorsque je sélectionne une option dans le champ "SELECT", le champ "INPUT" soit rempli et vice versa en saisissant le code dans le champ "INPUT" la sélection soit faite dans le SELECT...

Mes connaissances étant quasi nulle en Javascript, je fais appel à votre aide car je n'arrive pas à trouver comment solutionner mon problème.

Merci à vous pour l'aide que vous pourrez m'apporter.

Voici le code de mon haut de page :

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
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script
			  src="https://code.jquery.com/jquery-3.6.0.js"
			  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
			  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
    $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
 
$("#libelle_cocktail").change(function() {
    $("#code_cocktail").val($(this).val());
}).change(); // trigger once if needed
</script>

Et le code de la partie de mon formulaire :

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
<form>
                <div class="mb-3">
                    <label for="code_cocktail" class="form-label">Code cocktail</label>
                    <input type="text" class="form-control"  wire:model="state.code_cocktail" id="code_stage" placeholder="">
                </div>
 
       <div class="mb-3">
       <label for="libelle_cocktail" class="form-label">Cocktail choisi</label>
 
                <select class="js-example-basic-single form-control" name="libelle_cocktail">
                @foreach ($cocktails as $cocktail)
                    <option value="{{ $cocktail->id }}">{{ $cocktail->nom}}</option>
                    @endforeach
                </select>

Je précise que cette application me permet de faire ma liste de course lorsqu'on organise des soirées :-p

Edit, j'ai fait évolué mon code entre temps et je n'avais pas la bonne page affichée. Mais ça ne fonctionne que dans un sens, j'arrive à changer l'INPUT mais pas à changer le SELECT.

[Trebor]

J'ai réussi en changeant .change en .focusout.

[Toufik83]

Bonjour,

Apparemment vous mélangez les attributs id, name, for.

Le Diez # au début du sélecteur #libelle_cocktail" indique que vous essayez de récupérer la valeur d'un élément HTML ayant l'attribut id égale à libelle_cocktail alors qu'il n'existe pas, la même chose pour #code_cocktail.

Corrigez votre code HTML et rajoutez les id aux éléments.

Puis quand je vois que les attributs value de la liste déroulante <option value="{{ $cocktail->id }}">, je me demande quel est le type de cet id? est-ce un chiffre, une chaîne de caractères ou les deux ? parce qu'il est utilisé lors de la recherche... :

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
$(document).ready(function() {//tout le code doit être à l'intérieur de document ready, et un seul document ready est suffisant dans un script js...
 
  $('.js-example-basic-single').select2().change(function() {
    $("#code_cocktail").val($(this).val());
  });
 
  $("#code_cocktail").on('change', function() {//L'événement "focusout" pourrait être utile aussi quand le curseur quitte la zone de texte
    if ($("#libelle_cocktail option[value='" + $(this).val() + "']").length) {//si la valeur saisie dans la zone de texte existe dans la liste déroulante on la sélectionne
      $('#libelle_cocktail').val($(this).val());
    } else {//sinon on sélectionne la première <option value="-1">Choisissez un Nom....</option>
      $('#libelle_cocktail').val(-1);
    }
    $('#libelle_cocktail').trigger("change.select2");
  });
});

[Trebor]

Bonsoir Toufik,

Merci de votre réponse. Effectivement, je n'ai aucune base en javascript... Je vais m'y mettre prochainement car je bloque à chaque fois sur des choses qui sont vraisemblablement à ma portée...

Merci pour ce bout de code, je vais aller le tester immédiatement.

L'ID est récupéré via une requête "Eloquent". Il s'agit d'un code de ma constitution qui représente l'ingrédient principal de ma recette (SO001 - Dominante soda, CO002 - Dominante cola)... J'avais trouvé une application de recette de cocktail ou c'est ce qui était utilisé et cela m'est utile.

Je teste et reviens vers vous pour vous dire si mon problème est solutionné.

[Trebor]

Bonjour Toufik,

Ça fonctionne, c'est super mais... Bizarrement, lorsque je saisi le code de mon cocktail, je perd la possibilité d'effectuer une recherche dans mon SELECT... Je ne vois pas trop d'où ça vient.

[Toufik83]

Bonjour Trebor,

mais... Bizarrement, lorsque je saisi le code de mon cocktail, je perd la possibilité d'effectuer une recherche dans mon SELECT...

Qu'est ce qui t'empêche d'effectuer la recherche ?

[Trebor]

Le champ "SELECT" redevient un champ classique sans "INPUT" à l'intérieur.

J'ai également fait évoluer mon application en utilisant Livewire. Et maintenant, lorsque j'utilise un autre champ "SELECT", le contenu de mon champ "libelle cocktail" disparait mais le code du cocktail reste...

Quel bazar...

[Toufik83]

Bonjour,

J'ai essayé de reproduire le problème que tu as dit dans ton message précèdent mais sans succès.

L'input à l'intérieur de la liste déroulante est toujours opérationnel, apparemment c'est la bibliothèque Livewire de Laravel qui pose problème.

As-tu testé le code sans l'utilisation de la bibliothèque ?

[Trebor]

Oui, effectivement, c'est Livewire qui réagit bizarrement. Je vais faire sans ou je vais essayé de trouver une solution car il semble que Livewire soit en capacité de faire ce que me fait la librairie Select2.