از پروژه‌های ابتدایی اما بسیار مهم محسوب می‌شود. امروزه شاهد این هستیم که تمام سایت‌ها بخشی برای جستجو دارند؛ تمام کسب و کارها از کوچک تا بزرگ از اهمیت استفاده از سرچ باکس اطلاع دارند.

در نظر داشته باشید کاربران هنگامی که کاربری وارد سایت شما می‌شود با انبوهی از اطلاعات روبه رو می‌شود و تنها 2 راه برای رسیدن به محتوای دلخواه خود دارند:

راه اول : تمام سایت شما را بگردند و زیر و رو کنند تا آن محتوا را پیدا کنند؛ باور کنید کسی آنقدر زمان نمی‌گذارد!!

راه دوم : عنوان مدنظر خودش را با استفاده از سرچ باکس به سادگی جستجو کند و به هدف خود برسد.

قطعا هر آدم عاقلی از راه دوم استفاده می‌کند؛ حالا که به اهمیت

پی‌بردید؛ در این مقاله سبزلرن همراه ما باشید تا آموزش ساخت سرچ باکس را به طور کامل یادگرفته و از آن برای پروژه‌های خودمان استفاده کنیم.

آموزش ساخت سرچ باکس در html

در این آموزش در کنار هم ابتدا به کمک HTML یک سرچ باکس می‌سازیم، در ادامه به کمک CSS و زبان جاوا اسکریپت آن را جذاب‌تر و زیباتر می‌کنیم و در قدم آخر نیز آموزش اتصال آن به دیتابیس سایت را باهم طی خواهیم کرد.

مراحلی که در این آموزش باهم طی خواهیم کرد عبارتند از:

• ساخت کادر جستجو در HTML
• استایل دهی کادر جستجو در CSS
• اتصال کادر جستجو به دیتابیس با جاوا اسکریپت

را به صورت قدم به قدم طی خواهیم کرد.

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

در قدم اول باید نوار جستجو را به کمک HTML پیاده سازی کنیم؛ برای ساخت آن تنها به 3 عنصر زیر نیاز داریم:

• تگ form

• تگ input

• تگ button

     
     Search

• Type

• Id

• Name

• Placeholder

    
    Search

استایل دهی کادر جستجو در CSS

حالا وقت رنگ آمیزی کد است؛ یک فایل با فرمت CSS بسازید و کد زیر را درون آن کپی کنید:

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

همانطور که مشاهد می‌کنید در قدم اول به تگ form که قالب ما است برخی استایل‌ها رو می‌دهیم که در ادامه قابلیت هر کدام را توضیح خواهیم داد:

• background-color

)

• width

• Height

• border-radius

• Display

• flex-direction

• align-items

input {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}

توضیح کد بالا به صورت زیر است:

• all

• Font

• Color

• Padding

::placeholder {
  color: #fff;
  opacity: 0.7;
}

• Opacity

حال استایل های زیر را به فایل CSS اضافه کنید:

button {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

svg {
  color: #fff;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 10px;
}

خروجی فایل ما به‌صورت زیر خواهد بود:

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

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

• یک event listener برای فرم تا بفهمیم چه وقت کسی دکمه‌ی سرچ را فشار می‌دهد.
• دریافت مقدار متنی از باکس پرس و جو
• ساخت آدرس گوگل که سرچ را در سایت ما انجام می‌دهد.
• باز کردن یک تب جدید با گوگل و query جستجو

site:pagedart.com lazy loading

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

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'example.com';

function submitted(event) {
  event.preventDefault();
  const url = google + site + '+' + q.value;
  const win = window.open(url, '_blank');
  win.focus();
}

f.addEventListener('submit', submitted);

اولین کاری که باید انجام دهیم این است که برخی از متغیرها را به فرم و جعبه ورودی اضافه کنیم. سپس آدرس گوگل را تنظیم کنیم و این متغیرها را به آن اختصاص دهیم:

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'sabzlearn.ir';

حال تابعی می‌نویسیم که وقتی کاربر دکمه‌ی سرچ را زد، یک تب جدید گوگل برای او باز شود و عبارت وارد شده را در سایت جستجو کرده و نتایج را در تب جدید نمایش دهد:

function submitted(event) {
  event.preventDefault();
  const url = google + site + '+' + q.value;
  const win = window.open(url, '_blank');
  win.focus();
}

آخرین خط کدی که باید بنویسیم، کد زیر است:

f.addEventListener('submit', submitted);

این کد یک listener به فرم اضافه می‌کند. وقتی دکمه‌ی سرچ را بزنید، تابع سرچ اجرا می‌شود. حال اگر شما سرچ کوئری را وارد کنید و روی دکمه‌ی سرچ کلیک کنید، یک تب جدید برای شما باز می‌شود که نتایج سایت را به شما نشان خواهد داد. خب کار ساخت سرچ باکس در html نیز تمام شد، با این دستوارتی که گفتیم شما می توانید به راحتی یک سرچ باکس عملیاتی و کارآمد برای سایت خودتان طراحی کنید.

راه حل کامل

در این مقاله آموزش ساخت سرچ باکس در html را به شما نشان دادیم و با هم مرحله به مرحله جلو رفتیم. کد زیر دستور کامل ساخت سرچ در html را نشان می‌‌دهد:

نکاتی برای ساخت باکس جستجو در html به بهترین شکل

همان‌طور که گفتیم سرچ باکس قابلیتی است که روی تجربه‌ی کاربران و سئوی سایت شما تاثیر زیادی دارد و باید به بهترین شکل آن را طراحی کنید. برای ساخت جستجو در html بهتر است به نکات زیر توجه داشته باشید:

• تا حد امکان آن را قابل مشاهده و برجسته طراحی کنید.
• از طرح‌های ساده ولی کاربردی استفاده کنید.
• سرچ باکس را در محلی قرار دهید که کاربر انتظار دارد.
• در تمامی صفحات سرچ باکس را قرار دهید.
• سرچ باکس را برای تمامی افراد و صفحه‌خوان‌ها در دسترس قرار دهید.
• سایز کادر جستجو را به اندازه‌ی کافی بزرگ در نظر بگیرید.
• حتما سرچ باکس خود را استایل دهید؛ اما، نه بیش از حد.
• حتما از آیکن ذره بین در سرچ باکس استفاده کنید.
• یک دکمه‌ی بازگشت برای برگشتن کاربر به حالت قبل از سرچ حتما در نظر بگیرید.
• برای اجرای سرچ در سایت، کاربر را مجبور به لاگین کردن نکنید.
• پیشنهادات جستجو به کاربر ارائه دهید.
• جستجوهای اخیر را به کاربران نمایش دهید.
• متن جستجو شده را حفظ کنید تا کاربر در دفعات بعدی مجددا تایپ نکند.
• قابلیت سرچ عبارت‌های مترادف را نیز فعال کنید.
• قابلیت تصحیح خودکار به سرچ اضافه کنید.
• قابلیت سرچ صوتی را نیز به سرچ باکس اضافه کنید.

چگونه میتوانم HTML را یاد بگیریم؟

برای یادگیری HTML به‌صورت اصولی شما نیاز دارید در کنار یک مدرس باتجربه و دلسوز آموزش خودتان را طی کنید و همچنین در طول مسیر یادگیری از پشتیبانی تمام وقت برخوردار باشید تا در لحظه به لحظه پیشرفتتان به صورت قدم به قدم شما را در مسیر یادگیر HTML یاری کند؛ احتمالا فکر کنید که همچین چیزی خیالی است!! اصلا همچین شرایطی مگه وجود دارد؟ باید بگم بله؛ شما می‌توانید

را در کنار تیم سبزلرن یاد بگیرید آن هم به‌صورت کاملا رایگان!!!  شما در طول دوره آموزشی تمرینات مختلفی از مدرس دریافت می‌کنید و همچنین پروژه‌های متنوعی را پیاده سازی خواهید کرد تا به HTML به طور کامل مسلط شوید پس فرصت رو غنمیت بشمرید و همین الان یادگیری خودتان را شروع کنید.