Discussion :

[clickandgo]

Bonjour � tous

Je tente d�sesp�ramment de r�cup�rer le r�sultat du fetch effectu� dans la classe Search.js pour l'exploiter dans la classe Combobox.js mais le r�sultat revient en "undefined"...

D'autre part, il semblerait que les async/await sont ignor�s du c�t� de Combobox.js, les await sont soulign�s dans le code qui me dit 'await has no effect on the type of this expression'.

J'ai essay� de mettre les fonctions dans le bon ordre d'�x�cution dans le init(), �a ne change rien...

Je signale que le fetch retourne bien les r�sultats escompt�s depuis Search.js

Merci d'avance pour toute aide

Search.js :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
export class Search {
  /**
   * @param { String } url Spécifie l'url requise (controller)
   * @param {string} method Spécifie la méthode GET ou POST
   * @param { String } searchInputId Spécifie l'id du champ de recherche ciblé
   * @param { String } resultsFieldId Spécifie l'id du champ d'affichage des résultats
   * @param {boolean} createList (false par défaut) Spécifie si le résultat doit être présenté en tant que liste dans le champ de résultats
   */
  constructor(url, method, searchInputId, resultsFieldId, createList = false) {
    this.url = url;
    this.method = method;
    this.searchInputId = searchInputId;
    this.resultsFieldId = resultsFieldId;
    this.resultsFieldId = document.querySelector(`#${this.resultsFieldId}`);
    this.searchInputId = document.querySelector(`#${this.searchInputId}`);
    this.createList = createList;  
  }
 
  fetchData() {
    let data;
    let response = "";
    let timeout = null;
    const formData = new FormData();
 
    this.searchInputId.addEventListener("keyup", (e) => {
      e.preventDefault();
      let recherche = this.searchInputId.value;
 
      if (recherche.length > 0) {
        if (timeout !== null) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          rechercher(formData, recherche);
        }, 1000);
      }
    });
    const rechercher = async (formData, recherche) => {
      try {
        if (this.method === "POST") {
          formData.append("recherche", recherche);
          response = await fetch(this.url, {
            method: this.method,
            headers: {
              Accept: "application/json",
              "X-Requested-with": "XMLHttpRequest",
            },
            body: formData,
          });
        } else {
          response = await fetch(`${this.url}${recherche}`, {
            method: this.method,
            headers: {
              Accept: "application/json",
              "X-Requested-with": "XMLHttpRequest",
            },
          });
        }
 
        if (response.ok) {
          data = await response.json();
          this.resultsFieldId.innerHTML = "";
          if (data || data.content !== "") {
            if (this.createList) {
              //Crée une liste de valeurs pour autocomplete
              const ul = document.createElement("ul");
 
              data.map((el) => {
                let li = document.createElement("li");
                li.textContent = el.nom + " " + el.prenom;
                ul.append(li);
              });
              this.resultsFieldId.append(ul);
              //
            } else {
              //Affiche simplement le résultat dans le champ en fragment HTML
              this.resultsFieldId.insertAdjacentHTML(
                "afterbegin",
                data.content
              );
            }
          } else {
            this.resultsFieldId.innerHTML = `<p class="alert">Aucun résultat trouvé avec ces termes : "${this.searchInputId.value}"</p>`;
          }
 
          console.log("data depuis classe Search.js = ", data);
          return data;
        }
      } catch (error) {
        console.log(error);
      }
    };
  }
 
}

Combobox.js :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { Search } from "./Search.js";
 
export class Combobox extends Search {
  /**
   * @param {string} wrapperDiv Id de la Div recevant le combobox
   * @param {string} comboboxLabel titre du label du combobox
   */
 
  constructor(wrapperDiv, comboboxLabel, url, method) {
    super(url, method);
    this.comboboxLabel = comboboxLabel;
    this.wrapperDiv = document.querySelector(`#${wrapperDiv}`);
 
    //Initialisation des fonctions dans l'ordre
    this.init();
  }
 
  init() {
    this.createCombobox();
  }
 
  createCombobox() {
    //Création du combobox de recherche
 
    //Création du label de combobox
    this.labelCombobox = document.createElement("span");
    this.labelCombobox.className = "combobox-label";
    this.labelCombobox.textContent = this.comboboxLabel;
 
    this.combobox = document.createElement("div");
    this.combobox.className = "combobox-content";
    this.combobox.id = "combobox";
 
    //label du champ de recherche
    const labelSearchInput = document.createElement("label");
    labelSearchInput.htmlFor = "search-input";
    labelSearchInput.innerText = "Rechercher";
 
    //création du champ input de recherche
    const searchInput = document.createElement("input");
    searchInput.type = "search";
    searchInput.className = "form__input search-input";
    searchInput.id = "combobox-search-input";
    this.searchInputId = searchInput.id;
    console.log(this.searchInputId);
 
    //Création de la liste de résultats autocomplete
    const searchResultsList = document.createElement("div");
    searchResultsList.className = "search-results-list";
    searchResultsList.id = "search-results-list";
    this.searchResultsListId = searchResultsList.id;
 
    //section liste des éléments sélectionnés
    const selectedItemsList = document.createElement("div");
    selectedItemsList.className = "selected-items-list";
    selectedItemsList.id = "selected-items-list";
 
    //Application des champs dans le wrapper "combobox"
    this.combobox.append(
      labelSearchInput,
      searchInput,
      searchResultsList,
      selectedItemsList
    );
 
    //Création du combobox dans la div renseignée
    this.wrapperDiv.append(this.labelCombobox, this.combobox);
 
    this.searchItems();
  }
  //lancement de la requête fetch dans la classe Search.js
  async searchItems() {
    let search = await new Search(
      this.url,
      this.method,
      this.searchInputId,
      this.searchResultsListId,
      true
    );
 
    let results = await search.fetchData();
    console.log("data depuis la classe Combobox.js = ", results);
 
    return results;
  }
}