Modifier l'icone Materialize

Bonjour,

Je travaille sur un champ autocomplété sous Materialize.

Pièce jointe 640699

Comme on peut le voir, l'icône de droite ne trouve pas l'image.

J'ai généré la donnée demandée par une API (voir quelques posts dans les fils Javascript et PHP ces derniers jours) sous cette forme:

Code:

---

1 2 3 4 5 6

var json = { "Moissac (FRA - 82112)" : "FRA", "Montauban (FRA - 82121)" : "FRA", etc. }

---

Je m'aperçois que la seconde partie du json (donnée à droite des ':') correspond à l'URL de l'image de la vignette. Je ne peux pas générer ce genre d'URL côté API, vu que cette dernière doit fournir la donnée pour une utilisation la plus universelle possible.

La solution se situe donc côté Front. Si je modifie directement dans le JS fourni par Materialize, ça fonctionne mais cela n'est absolument pas optimal. Il s'agit de la modification d'un fichier général pour une utilisation réduite, limitée à l'autocomplétion des entités administratives d'un pays.

Pour bien, il faudrait changer dynamiquement la source, mais je ne sais pas trop comment faire.

Pièce jointe 640701

Est ce qqun aurait une idée ?

Merci pour vos retours,
Bonne journée,

Sylvain

je ne vois pas d'image dans la documentation, quel code javascript utilisez vous pour générer ce menu déroulant ?
https://materializecss.com/autocomplete.html

Bonjour,

Citation:

---

Envoyé par mathieu

je ne vois pas d'image dans la documentation, ...

---

on peut lire dans la doc

Citation:

---

Envoyé par Initialization

The data is a json object where the key is the matching string and the value is an optional image url.

---

et en explorant le fichier source : https://materializecss.com/bin/materialize.js

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

// Render for (var i = 0; i < matchingData.length; i++) { var _entry = matchingData[i]; var $autocompleteOption = $('<li></li>'); if (!!_entry.data) { $autocompleteOption.append("<img src=\"" + _entry.data + "\" class=\"right circle\"><span>" + _entry.key + "</span>"); } else { $autocompleteOption.append('<span>' + _entry.key + '</span>'); }   $(this.container).append($autocompleteOption); this._highlight(val, $autocompleteOption); }

---

Pour en revenir à la question, il suffit à réception du JSON de modifier la value de chaque key pour la faire pointer sur une l'adresse de l'image correspondante, comme par exemple :

Code:

---

1 2 3 4 5 6 7 8

const objJSON = { "Moissac (FRA - 82112)": "FRA", "Montauban (FRA - 82121)": "FRA", } // modif. des données images Object.keys(objJSON).forEach((key) => { objJSON[key] = `images/${objJSON[key]}.png`; })

---

avant de transmettre le tout à l'autocomplete.