templates/utils/search-form-input.html.twig line 1

Open in your IDE?
  1. <div class="input-white mobile-w-100">
  2. <label for="input-global-search">
  3. <div>
  4. <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 21.414 21.414">
  5. <g id="Icon_feather-search" data-name="Icon feather-search" transform="translate(-3.5 -3.5)">
  6. <path id="Tracé_15" data-name="Tracé 15" d="M21.389,12.944A8.444,8.444,0,1,1,12.944,4.5a8.444,8.444,0,0,1,8.444,8.444Z" transform="translate(0 0)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  7. <path id="Tracé_16" data-name="Tracé 16" d="M29.567,29.567l-4.592-4.592" transform="translate(-6.067 -6.067)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  8. </g>
  9. </svg>
  10. </div>
  11. <input type="text" placeholder="Besoin, spécialité, praticien etc. " id="input-global-search" name="search" autocomplete="off" style="min-width: 250px" value="{% if terms is defined and terms %}{{ terms }}{% endif %}" />
  12. </label>
  13. </div>
  15. <script src="{{ asset('lib/autocomplete/dist/autoComplete.min.js') }}"></script>
  16. <script>
  17. (function() {
  18. const config = {
  19. selector: "#input-global-search",
  20. data: {
  21. src: async (query) => {
  22. try {
  23. const source = await fetch(`/publicapi/search/${query}`);
  24. const data = await source.json();
  25. return data;
  26. } catch (error) {
  27. return error;
  28. }
  29. },
  30. keys: ["label"]
  31. },
  32. resultsList: {
  33. noResults: false,
  34. },
  35. resultItem: {
  36. element: (list, data) => {
  37. list.innerHTML = "<div class='d-flex align-items-center justify-content-between gap-5'><div class='fw-semibold'>"+ data.value.label +"</div></div>"
  38. },
  39. },
  40. debounce: 300,
  41. submit: true,
  42. };
  44. const autoCompleteJS = new autoComplete(config);
  46. document.getElementById("input-global-search").addEventListener("selection", function (event) {
  47. if (event.detail.selection) {
  48. document.getElementById('input-global-search').value = event.detail.selection.value.label;
  49. }
  50. });
  51. })();
  52. </script>