11486 sujets

JavaScript, DOM et API Web HTML5

Autocomplete jQuery

Bonjour,

Je cherche à faire un champs autocomplete à deux colonnes, mais j'arrive pas à m'en sortir!

merci d'avance!
Modifié par itachis (23 Jul 2014 - 09:39)
Bonjour,

Et tu en est où exactement ? Où se trouve ton travail en cours ou du moins une ébauche de page de test ? Quel est ton problème exact d'ailleurs finalement ? Et puis… qu'entends-tu exactement par "autocomplete à deux colonnes" au passage ?

Tu comprends bien qu'il est complètement impossible de t'aider sans plus de précisions Smiley cligne
… et sans une page de test en ligne, chez toi ou via un service comme Codepen/JsFiddle, suivant la nature du problème.
Au faite j'essaye de faire liste deroulante avec des drapeaux et noms de pays mais sauf que je sais comment afficher le drapeau dans la liste puis un champs input pour le numero de telephone comme suit:
upload/55199-liste.png .
Au départ j'ai tenté avec les selects mais l'image ne s'affiche pas dans la liste

<select>
        <option value="fr" data-image="png/fr.png" selected><img src="png/fr.png">Français</option>
        <option value="en" data-image="png/en.png">English</option>
        <option value="de" data-image="png/de.png">Deutch</option>
        <option value="es" data-image="png/es.png">Espanol</option>
 </select>

Donc j'ai pensé utilser un autocomplete sur un champs input , l'autocomplete fonctionne avec la liste des pays mais j'arrive pas à reproduire l'exemple sur l'image: Smiley decu
voici mon code autocomplete:

var availableTags = [
"Samoa",
"Yemen",
"Serbie-et-Montenegro",
"Zambie"
];
$("#pays_log").autocomplete({source:availableTags});

merci d'avance.
Modifié par itachis (23 Jul 2014 - 12:41)
Re,

Je vois que tu utilise dans ton HTML un attribut data-image avec l'image de chaque drapeau.
Le truc, c'est qu'il faut ensuite utiliser la valeur de cet attribut comme valeur de la propriété CSS "background-image" du <lI> de chacune de tes options. Cela suppose que tu n'utilise pas un simple <select> mais un réecriture complète de celui-ci, par exemple via la lib jquery.

As-tu une page en ligne montrant où tu en est ? Un JsFiddle / codepen / whatever ?
Pour l'instant, à quoi donc te sert data-image="png/fr.png", que tu utilise au sein des options de ton select ?

C'est justement cela qu'il faut utiliser une fois l'élément réécrit en liste <ul><li> pour donner le background-image correspondant à l'élément <li> créé.

Vraiment, il faudrait soit mettre une page de test en ligne, soit faire un jsFiddle, ce serait beaucoup plus simple pour prendre comme base ce que tu as pour l'instant Smiley smile
Bon c'est pas grave je vais essayé quelque chose si j'arrive pas je vais essayer de m'inscrire sur jsFiddle.
Parcontre comment change ton la valeur afficher dans un select de façon dynamique.
Par exemple:

<script>
$("#pays option").text(' ');
$("#pays option").each(function(){
   if( $(this).text()=="") $(this).text($(this).attr("attr","data-image"));

});

</script>

<select id=pays>
        <option value="fr" data-image="png/fr.png" selected><img src="png/fr.png">Français</option>
        <option value="en" data-image="png/en.png">English</option>
        <option value="de" data-image="png/de.png">Deutch</option>
        <option value="es" data-image="png/es.png">Espanol</option>
 </select>

le problème est le changement n'est directement visible. sof apres actualisations
Modifié par itachis (23 Jul 2014 - 17:36)
Bonjour,

Je n'ai lu qu'en diagonale mais ta demande me semble tout à fais possible ; il faut passer par un autocomplete en JQuery et la source en JSON.

Ton JSON sera constitué comme ceci :
[{'value':1, 'nom_pays':'france', 'li_affichable':'<img/> france'}, ...]

Ta recherche se base du nom_pays , l'affichage sur li_affichable et ton hidden dont tu vas utiliser sa valeur se base sur value.

Bon courage Smiley smile !
Sujet clos
Aller à