آموزش مقدماتی ساخت نوار جستجو (سرچ باکس) + افزونه ها

ایجاد یک باکس جستجو در HTML از تکنیک‌های ضروری برای طراحی وبسایت است. هر کاربری که به سایت شما وارد می‌شود، علاقه‌مند به یافتن اطلاعات و مطالب خاصی است و هدفی مشخص دارد. اگر شما به بازدیدکنندگان در جستجوی محتوای مورد نظرشان کمک نکنید، احتمالاً کاربران سایت شما را ترک خواهند کرد.

ایجاد یک باکس جستجو در HTML یکی از راه‌هایی است که می‌توانید به کاربرانتان در دستیابی به هدفشان کمک کنید و همچنین باعث افزایش آمار بازدید سایت شما می‌شود. در این مقاله از بایت به آموزش ساخت سرچ باکس در html می‌پردازیم و به شما می‌گوییم که برای ساخت جستجو در html باید به چه نکاتی توجه کنید، پس با ما همراه باشید.

ایجاد کادر جستجو در html

برای ساخت یک کادر جستجو در HTML، می‌توانید از عنصر <input> استفاده کنید. بهترین نوع ورودی برای این منظور، نوع “text” است. در زیر مثالی از کد HTML برای ساخت یک کادر جستجو آورده شده است:

<form id="form"> <input type="search" id="query" name="q" placeholder="Search..."&gt; <button>Search</button> </form>

خروجی این کد به شکل ذیل خواهد بود:

شما می‌توانید این کد را به نیازهای خود تغییر دهید، مانند تغییر متن دکمه، عملیات جستجو، یا استایل‌دهی به المان‌ها.

کد فوق شامل تمام عناصر مورد نیاز برای ساخت یک کادر جستجو در HTML است. ویژگی‌های مختلفی برای عنصر <input> در این کد تعریف شده است که در ادامه به جزئیات آنها پرداخته می‌شود:

• نوع (Type): این ویژگی تعیین می‌کند که چگونه ورودی در صفحه نمایش داده شود. ورودی‌های مختلفی مانند رمز عبور و چک باکس ورود وجود دارند که می‌توان برای این ویژگی تعریف کرد. برای ساخت کادر جستجو در HTML، از نوع “search” برای نوع ورودی استفاده کردیم.
• شناسه (Id): تنظیم یک شناسه می‌تواند به شما کمک کند تا به باکس ورودی ارجاع دهید و از آن در جاوا اسکریپت و استفاده‌های بعدی استفاده کنید.
• نام (Name): معمولاً برای این ویژگی از “q” به عنوان نام برای باکس جستجو استفاده می‌شود.
• راهنما (Placeholder): این متن یک راهنما برای محتوایی است که کاربر در ورودی وارد می‌کند و به صورت ضعیف در باکس ورودی نمایش داده می‌شود.

کد css برای سرچ باکس

با استفاده از CSS، می‌توانید به کادر جستجوی HTML استایل دهی کنید. در زیر، یک نمونه کد CSS برای استایل دهی به کادر جستجو ارائه می‌شود:

<style>
  .search-box {
    display: flex;
    align-items: center;
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .search-box input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
  }

  .search-box button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

<form id="form"> <input type="search" id="query" name="q" placeholder="Search..."&gt; <button>Search</button> </form>

به کادر جستجو استایل داده شده است. برخی از ویژگی‌های استایل داده شده عبارتند از:

• نمایش: flex؛ برای قرار دادن المان‌های داخل کادر جستجو در یک ردیف و به صفحه عرضی.
• اندازه‌گیری عرض: ۳۰۰ پیکسل؛ برای تعیین عرض کادر جستجو.
• پدینگ: ۱۰ پیکسل؛ برای فاصله دادن بین محتویات داخل کادر جستجو و حاشیه‌اش.
• حاشیه: ۱ پیکسل، خط خاکستری رنگ؛ برای ایجاد حاشیه دور کادر جستجو.
• شعاع حاشیه: ۵ پیکسل؛ برای گوشه‌های گرد کادر جستجو.
• سایر استایل‌ها برای ورودی و دکمه نیز تعریف شده است.

شما می‌توانید این کد را به نیازهای خود و استایل موردنظرتان تغییر دهید.

ساخت نوار جستجو با جاوا اسکریپت

برای ساخت یک سرچ باکس با استفاده از JavaScript، ابتدا نیاز دارید یک عنصر <input> با نوع “text” ایجاد کنید و یک تابع جاوا اسکریپت برای پردازش عملیات جستجو بنویسید. در زیر، یک نمونه کد برای ساخت سرچ باکس با جاوا اسکریپت آورده شده است:

<input type="text" id="searchInput" placeholder="جستجو...">
<button type="button" onclick="performSearch()">جستجو</button>

<script>
  function performSearch() {
    var searchTerm = document.getElementById("searchInput").value;
    // اینجا می‌توانید عملیات جستجو خود را انجام دهید
    alert("عبارت جستجو شده: " + searchTerm);
  }
</script>

در این مثال، ما یک عنصر <input> با نوع “text” ایجاد کرده‌ایم که با شناسه “searchInput” مشخص شده است. همچنین یک دکمه نیز وجود دارد که با کلیک بر روی آن، تابع performSearch() فراخوانی می‌شود.

در تابع performSearch()، ما مقدار وارد شده در سرچ باکس را با استفاده از شناسه “searchInput” گرفته و در متغیر searchTerm ذخیره می‌کنیم. شما می‌توانید عملیات جستجو خود را با استفاده از این متغیر انجام دهید. در این مثال، ما فقط یک پیام با استفاده از alert() نمایش می‌دهیم که عبارت جستجو شده را نشان می‌دهد.

شما می‌توانید تابع performSearch() را با عملیات جستجو و پردازش داده‌ها خود جایگزین کنید.

چگونه می‌توانم به سرچ باکس جاوا اسکریپتی که ساختم، داده‌هایی را اضافه کنم؟

برای اضافه کردن داده‌ها به سرچ باکس جاوا اسکریپتی، شما می‌توانید از متغیرها یا آرایه‌ها برای ذخیره و مدیریت داده‌ها استفاده کنید. در زیر، یک نمونه کد برای اضافه کردن داده‌ها به سرچ باکس جاوا اسکریپتی آورده شده است:

<input type="text" id="searchInput" placeholder="جستجو...">
<button type="button" onclick="performSearch()">جستجو</button>

<script>
  var searchData = [];  // آرایه‌ای برای ذخیره داده‌های جستجو

  function addData() {
    var input = document.getElementById("searchInput").value;
    searchData.push(input);
    document.getElementById("searchInput").value = "";  // پاک کردن محتویات سرچ باکس
    console.log(searchData);  // نمایش داده‌ها در کنسول
  }

  function performSearch() {
    var searchTerm = document.getElementById("searchInput").value;
    // اینجا می‌توانید عملیات جستجو خود را با استفاده از داده‌های ذخیره شده انجام دهید
    console.log("عبارت جستجو شده: " + searchTerm);
  }
</script>

در این مثال، ما یک آرایه با نام searchData ایجاد کرده‌ایم که برای ذخیره داده‌های جستجو استفاده می‌شود. در تابع addData()، مقدار وارد شده در سرچ باکس را با استفاده از شناسه “searchInput” گرفته و به آرایه searchData اضافه می‌کنیم. سپس محتویات سرچ باکس را پاک کرده و داده‌های ذخیره شده را در کنسول نمایش می‌دهیم.

در تابع performSearch()، ما همچنان مقدار وارد شده در سرچ باکس را با استفاده از شناسه “searchInput” گرفته و در متغیر searchTerm ذخیره می‌کنیم. شما می‌توانید عملیات جستجو خود را با استفاده از داده‌های ذخیره شده در آرایه searchData انجام دهید.

با استفاده از روش‌ها و توابع دیگری که در جاوا اسکریپت در دسترس هستند، می‌توانید به دلخواه خود داده‌ها را مدیریت کنید.

آموزش استفاده از API برای دریافت داده‌های جستجو

شما می‌توانید از یک API برای دریافت داده‌های جستجو استفاده کنید. با استفاده از API، شما می‌توانید درخواست‌های HTTP را به سروری ارسال کنید و داده‌های موردنظر را دریافت کنید.

برای استفاده از یک API در جاوا اسکریپت، شما باید ابتدا درخواست را ایجاد و سپس داده‌های دریافتی را در پاسخ دریافتی پردازش کنید. برای این کار، می‌توانید از تابع fetch() استفاده کنید که در جاوا اسکریپت مدرن معرفی شده است.

در زیر، یک نمونه کد برای استفاده از یک API جستجو را مشاهده می کنید:

<input type="text" id="searchInput" placeholder="جستجو...">
<button type="button" onclick="performSearch()">جستجو</button>

<script>
  function performSearch() {
    var searchTerm = document.getElementById("searchInput").value;
    var apiUrl = "https://api.example.com/search?term=" + searchTerm;

    fetch(apiUrl)
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        // اینجا می‌توانید داده‌های دریافتی را پردازش کنید
        console.log(data);
      })
      .catch(function(error) {
        console.log("خطا در دریافت داده: " + error);
      });
  }
</script>

در این مثال، ما از تابع fetch() برای ارسال درخواست به API استفاده کرده‌ایم. آدرس API در متغیر apiUrl قرار داده شده است و پارامتر جستجو (term) با مقدار وارد شده در سرچ باکس ترکیب شده است. سپس با استفاده از .then()، پاسخ دریافتی را به صورت JSON پردازش می‌کنیم.

در .then() بعدی، شما می‌توانید داده‌های دریافتی را پردازش کنید. در این مثال، ما فقط داده‌های دریافتی را در کنسول نمایش می‌دهیم. در صورت بروز خطا در دریافت داده، ما از .catch() برای نمایش خطا استفاده می‌کنیم.

لطفاً توجه داشته باشید که آدرس API و نحوه پردازش داده‌ها بستگی به API مورد استفاده شما دارد. باید مستندات API مورد نظر خود را مطالعه کنید و مدل درخواست و پاسخ را بر اساس آن تنظیم کنید.

چگونه می‌توانم داده‌های ذخیره شده در searchData را در یک جدول HTML نمایش دهم؟

برای نمایش داده‌های ذخیره شده در آرایه searchData در یک جدول HTML، می‌توانید از جاوااسکریپت و DOM استفاده کنید. در زیر، یک نمونه کد برای نمایش داده‌ها در یک جدول HTML آورده شده است:

<input type="text" id="searchInput" placeholder="جستجو...">
<button type="button" onclick="performSearch()">جستجو</button>

<table id="searchTable">
  <thead>
    <tr>
      <th>ردیف</th>
      <th>داده</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  var searchData = [];  // آرایه‌ای برای ذخیره داده‌های جستجو

  function addData() {
    var input = document.getElementById("searchInput").value;
    searchData.push(input);
    document.getElementById("searchInput").value = "";  // پاک کردن محتویات سرچ باکس
    displayData();  // نمایش داده‌ها در جدول
  }

  function displayData() {
    var tableBody = document.getElementById("searchTable").getElementsByTagName("tbody")[0];
    tableBody.innerHTML = "";  // پاک کردن محتویات جدول

    for (var i = 0; i < searchData.length; i++) {
      var row = tableBody.insertRow(i);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);

      cell1.innerHTML = i + 1;  // شماره ردیف
      cell2.innerHTML = searchData[i];  // مقدار داده

      // می‌توانید ستون‌های دیگر را نیز اضافه کنید
    }
  }

  function performSearch() {
    var searchTerm = document.getElementById("searchInput").value;
    // اینجا می‌توانید عملیات جستجو خود را با استفاده از داده‌های ذخیره شده انجام دهید
    console.log("عبارت جستجو شده: " + searchTerm);
  }
</script>

در این مثال، ما یک جدول HTML با شناسه “searchTable” ایجاد کرده‌ایم که داده‌ها را در آن نمایش می‌دهد. تابع displayData() برای نمایش داده‌ها در جدول استفاده می‌شود.

در تابع displayData()، ابتدا ما متغیر tableBody را برای دسترسی به بدنه جدول دریافت می‌کنیم. سپس محتویات جدول را پاک می‌کنیم. سپس با استفاده از حلقه for، برای هر داده ذخیره شده در آرایه searchData یک ردیف جدید به بدنه جدول اضافه می‌کنیم. ستون‌ها را با استفاده از توابع insertRow() و insertCell() ایجاد می‌کنیم و مقادیر داده را تنظیم می‌کنیم.

می‌توانید ستون‌های دیگری را در جدول اضافه کنید و مقادیر موردنظر خود را در آنها قرار دهید.