<script>
const wrapper = document.querySelector(
  ".sigmaweb-search-input-t2 .e-search-input-wrapper"
);
const input = wrapper.querySelector("input");

// ساختن div متحرک (مثل placeholder)
const customDiv = document.createElement("div");
customDiv.className = "sigmaweb-category-box-t2";

const ul = document.createElement("ul");

// هر آیتم شامل متن و مسیر عکس است
const items = [
  { text: "جست‌وجوی کالا و فروشگاه" },
  {
    text: "هندزفری،‌ تی شرت، ساعت",
    img: "https://demo.sigma-webproject.ir/wp-content/uploads/2025/04/search-img1.webp",
  },
  {
    text: "عطر، گردن‌بند، لباس زنانه",
    img: "https://demo.sigma-webproject.ir/wp-content/uploads/2025/04/search-img2.webp",
  },
];

items.forEach((item) => {
  const li = document.createElement("li");

  // فقط اگر عکس وجود داشت، بساز و اضافه کن
  if (item.img) {
    const img = document.createElement("img");
    img.src = item.img;
    img.alt = item.text;
    li.appendChild(img);
  }

  const span = document.createElement("span");
  span.textContent = item.text;
  li.appendChild(span);

  li.addEventListener("click", () => input.focus());
  ul.appendChild(li);
});

customDiv.appendChild(ul);
wrapper.appendChild(customDiv);

const toggleList = () => {
  if (input === document.activeElement) {
    customDiv.style.display = "none";
  } else {
    customDiv.style.display = input.value.trim() === "" ? "block" : "none";
  }
};

input.addEventListener("input", toggleList);
input.addEventListener("focus", toggleList);
input.addEventListener("blur", toggleList);
toggleList();

</script>