ساخت سرچ‌باکس

سلام روز بخیر
اگه درست متوجه شده باشم کدی که پایین مینویسم به درد میخوره فقط به صورت دست باید آدرسی دهی کنی.

Html:

<form>
  <input type="text" placeholder="جستجو...">
</form>

Css:

form input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 16px;
  outline: none;
  width: 200px;
  display: none; /* Initially hide the input element */
}

form .search-results {
  display: none;
  border: 1px solid #ccc;
  margin-top: 10px;
  padding: 10px;
}

form input[type="text"] {
  /*...*/
  transition: all 0.3s ease;
}

form input[type="text"].open {
  display: block;
}

form .search-results.open {
  display: block;
}

Js:

// Get the search input field
var searchInput = document.querySelector("form input[type='text']");

// Get the search button
var searchButton = document.querySelector("form button");

// When the user clicks on the search button, toggle the search input field
searchButton.addEventListener("click", function() {
  searchInput.style.display = searchInput.style.display === "none" ? "block" : "none";
});

searchInput.addEventListener("input", function() {
  var searchTerm = this.value;

  // Do the search
  var results = doSearch(searchTerm);

  // Show the search results
  var searchResults = document.querySelector("form .search-results");
  searchResults.innerHTML = results.join("");
  searchResults.classList.add("open");
});

function doSearch(searchTerm) {
  // Perform the search and return the results
  // Here we are returning a simple array of search results
  // You can replace this with any kind of real search you want
  return [
    "<a href='#'>نتیجه ۱</a>",
    "<a href='#'>نتیجه ۲</a>",
    "<a href='#'>نتیجه ۳</a>"
  ];
}

سوالی داشتید درخدمتم.

درود خوبی...
سایت کدپن منبع عظیمی از پروژه های آماده وجود دارد:
https://codepen.io/search/pens?q=search+box

کد هارو زدم ولی اجرا نکرد

@Erfkhan
عکس بفرستید لطفا
کدوم قسمت کار نکرد؟ آدرس دهیتون درست بوده؟

دوستان راهنمایی کردن اگه مشکلی وجود داره از ارور توی کنسول عکس بفرستید مشکل مشخص بشه.
به هر اگه میخواید فرانت اند کار کنید باید خودتون Javascript رو حداقل در حد مقدماتی و اونت ها یاد بگیرید چون برای مثال این موردی که میخواید طراحی کنید واقعا چیز ساده ای هست و زحمت زیادی هم نداره
اگه کد های آماده رو تست کردین و جواب نداد این اتفاق به این معنی که مشکل از طرف شماست. برای مثال ممکن کد های آماده مربوطه از کتاب خانه و یا نوع خاصی از کد نویسی(برای مثال Sass) استفاده کرده باشن.
از فایل ها و کنسول مرورگر عکس بفرستید