eloou

thank you for your support. I’ve erase everything and done it again and everything work fine.

Great plugin !

Thank you for the fast reply !

I just made another code so the search is on the title of the posts. also it show the title, the image, the date in a ul under the search bar :

<script>
document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("#search-bar-XXXXXXXX");
  const input = form.querySelector("input[name='s']");

  // Création dynamique de la liste de suggestions
  const resultsList = document.createElement("ul");
  resultsList.id = "autocomplete-results";
  form.querySelector(".search-container").appendChild(resultsList);

  let debounceTimeout;

  input.addEventListener("input", function () {
    const query = this.value.trim();
    clearTimeout(debounceTimeout);

    if (query.length < 2) {
      resultsList.style.display = "none";
      return;
    }

    debounceTimeout = setTimeout(() => {
      fetch(https://URL.COM/wp-json/wp/v2/posts?search=${encodeURIComponent(query)}&per_page=5&_embed)
        .then(res => res.json())
        .then(posts => {
          resultsList.innerHTML = "";
          if (posts.length === 0) {
            resultsList.style.display = "none";
            return;
          }

          posts.forEach(post => {
            const li = document.createElement("li");
            li.style.padding = "8px";
            li.style.cursor = "pointer";
            li.style.display = "flex";
            li.style.alignItems = "center";
            li.style.borderBottom = "1px solid #eee";

            const a = document.createElement("a");
            a.href = post.link;
            a.style.display = "flex";
            a.style.alignItems = "center";
            a.style.textDecoration = "none";
            a.style.color = "inherit";
            a.style.width = "100%";

            // Image à la une
            let imgSrc = "";
            if (post._embedded && post._embedded["wp:featuredmedia"] && post._embedded["wp:featuredmedia"][0]) {
              imgSrc = post._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url;
            }
            if (imgSrc) {
              const img = document.createElement("img");
              img.src = imgSrc;
              img.style.width = "50px";
              img.style.height = "50px";
              img.style.objectFit = "cover";
              img.style.marginRight = "10px";
              img.style.borderRadius = "4px";
              a.appendChild(img);
            }

            // Texte
            const textContainer = document.createElement("div");

            const title = document.createElement("div");
            title.textContent = post.title.rendered;
            title.style.fontWeight = "bold";
            textContainer.appendChild(title);

            const date = document.createElement("div");
            const postDate = new Date(post.date);
            date.textContent = postDate.toLocaleDateString();
            date.style.fontSize = "0.8em";
            date.style.color = "#666";
            textContainer.appendChild(date);

            a.appendChild(textContainer);
            li.appendChild(a);
            resultsList.appendChild(li);
          });

          resultsList.style.display = "block";
        })
        .catch(() => {
          resultsList.style.display = "none";
        });
    }, 300);
  });

  // Fermer la liste si clic en dehors
  document.addEventListener("click", (e) => {
    if (!form.contains(e.target)) {
      resultsList.style.display = "none";
    }
  });
});
</script>

and the css for the autocomplete box

/* Suggestions autocomplete */
#search-bar-XXXXXXXX #autocomplete-results {
  list-style: none;
  position: absolute;
  top: 46px;
  left: 0;
  right: 45px;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  z-index: 999;
}

#search-bar-XXXXXXXX #autocomplete-results li {
  padding: 8px 12px;
  cursor: pointer;
}

#search-bar-XXXXXXXX #autocomplete-results li:hover {
  background-color: #f2f2f2;
}

Sorry for my lame question, i didn’t see the first input to fill in the widgets settings.

Thank you very much for you time.

Hi

thank you for your answer but those fields are not editable on the single layout.

here my screenshot : https://ibb.co/C0xGrN0

WordPress : 6.2.2
Directorist : 7.6.1
Php : 8.2.8