MonScoDocEssai/app/static/js/etud_autocomplete.js

// Mécanisme d'auto-complétion (choix) d'un étudiant
// Il faut un champs #etudiant (text input) et à coté un champ hidden etudid qui sera rempli.
// utilise autoComplete.js, source https://tarekraafat.github.io/autoComplete.js
// EV 2023-06-01

function etud_autocomplete_config(with_dept = false) {
  return {
    selector: "#etudiant",
    placeHolder: "Nom...",
    threshold: 3,
    data: {
      src: async (query) => {
        try {
          // Fetch Data from external Source
          const source = await fetch(`/ScoDoc/api/etudiants/name/${query}`);
          // Data should be an array of `Objects` or `Strings`
          const data = await source.json();
          return data;
        } catch (error) {
          return error;
        }
      },
      // Data source 'Object' key to be searched
      keys: ["nom"],
    },
    events: {
      input: {
        selection: (event) => {
          const prenom = sco_capitalize(event.detail.selection.value.prenom);
          const selection = with_dept
            ? `${event.detail.selection.value.nom} ${prenom} (${event.detail.selection.value.dept_acronym})`
            : `${event.detail.selection.value.nom} ${prenom}`;
          // store etudid
          const etudidField = document.getElementById("etudid");
          etudidField.value = event.detail.selection.value.id;
          autoCompleteJS.input.value = selection;
        },
      },
    },
    resultsList: {
      element: (list, data) => {
        if (!data.results.length) {
          // Create "No Results" message element
          const message = document.createElement("div");
          // Add class to the created element
          message.setAttribute("class", "no_result");
          // Add message text content
          message.innerHTML = `<span>Pas de résultat pour "${data.query}"</span>`;
          // Append message element to the results list
          list.prepend(message);
          // Efface l'etudid
          const etudidField = document.getElementById("etudid");
          etudidField.value = "";
        }
      },
      noResults: true,
    },
    resultItem: {
      highlight: true,
      element: (item, data) => {
        const prenom = sco_capitalize(data.value.prenom);
        item.innerHTML += with_dept
          ? ` ${prenom} (${data.value.dept_acronym})`
          : ` ${prenom}`;
      },
    },
  };
}