templates/Nordinfo/Main/parts/autocompleteCommune.js.html.twig line 1

Open in your IDE?
  1. <script>
  2.   const autoCompletejs = new autoComplete({
  3.     data: {
  4.       src: async function () {
  5.         document.querySelector("#{{autocomplete_selector}}");
  6.         const source = await fetch("{{ asset('json/autocomplete_vos_lieux.json') }}");
  7.         return await source.json();
  8.       },
  9.       key: ["name"],
  10.     },
  11.     sort: function (a, b) {
  12.       if (a.match < b.match) {
  13.         return -1;
  14.       }
  15.       if (a.match > b.match) {
  16.         return 1;
  17.       }
  18.       return 0;
  19.     },
  20.     query: {
  21.       manipulate: function (query) {
  22.         return query.replace("@pizza", "burger");
  23.       },
  24.     },
  25.     trigger: {
  26.       event: ["input", "focusin", "focusout"],
  27.       condition: function (query) {
  28.         return !!query.replace(/ /g, "").length && query !== "hamburger";
  29.       },
  30.     },
  31.     {% if autocomplete_selector == 'inputVille' %}
  32.       placeHolder: "",
  33.     {% else %}
  34.       placeHolder: "Je saisis ma commune",
  35.     {% endif %}
  36.     selector: "#{{autocomplete_selector}}",
  37.     debounce: 0,
  38.     searchEngine: "loose",
  39.     highlight: true,
  40.     maxResults: 5,
  41.     resultsList: {
  42.       render: true,
  43.       container: function (source) {
  44.         source.setAttribute("id", "autoComplete_list");
  45.       },
  46.       element: "ul",
  47.       destination: document.querySelector("#{{autocomplete_selector}}"),
  48.       position: "afterend",
  49.     },
  50.     resultItem: {
  51.       content: function (data, source) {
  52.         source.innerHTML = data.match;
  53.       },
  54.       element: "li",
  55.     },
  56.     noResults: function () {
  57.       const result = document.createElement("li");
  58.       result.setAttribute("class", "no_result");
  59.       result.setAttribute("tabindex", "1");
  60.       result.innerHTML = "Aucun territoire trouvé";
  61.       document.querySelector("#autoComplete_list").appendChild(result);
  62.     },
  63.     onSelection: function (feedback) {
  64.       document.querySelector("#{{autocomplete_selector}}").blur();
  65.       document.querySelector("#{{autocomplete_selector}}").value = feedback.selection.value.name;
  66.       document.querySelector("#{{autocomplete_selector}}").setAttribute("placeholder", "Je saisis ma commune");
  67.     },
  68.   });
  69.   ["focus", "blur"].forEach(function (eventType) {
  70.     const resultsList = document.querySelector("#autoComplete_list");
  71.     document.querySelector("#{{autocomplete_selector}}").addEventListener(eventType, function () {
  72.       if (eventType === "blur") {
  73.         resultsList.style.display = "none";
  74.       } else if (eventType === "focus") {
  75.         resultsList.style.display = "block";
  76.       }
  77.     });
  78.   });
  79. </script>