Discussion :

[sylvain257]

Bonjour,

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



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 :

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

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.



Est ce qqun aurait une idée ?

Merci pour vos retours,
Bonne journée,

Sylvain

[mathieu]

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

[NoSmoking]

Bonjour,

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

on peut lire dans la doc

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 :

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

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 :

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

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.