كيفية إنشاء شريط البحث مع اقتراحات البحث الإكمال التلقائي في جافا سكريبت

ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط بحث بسيط باستخدام اقتراحات بحث الإكمال التلقائي باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط بحث بسيط باستخدام اقتراحات بحث الإكمال التلقائي باستخدام HTML CSS وجافا سكريبت.

 

مربع البحث هو عنصر واجهة مستخدم رسومي موجود في العديد من مواقع الويب. وهو يعمل كحقل لإدخال استعلام أو مصطلح بحث من المستخدم للبحث عن المعلومات ذات الصلة واستردادها من قاعدة البيانات. الإكمال التلقائي هو نمط أو ميزة تُستخدم لعرض اقتراحات الاستعلام والتنبؤ ببقية الكلمة التي يكتبها المستخدم.

 

في هذا البرنامج [شريط البحث مع اقتراحات البحث ذات الإكمال التلقائي] ، على صفحة الويب ، يوجد شريط بحث وعندما تكتب شيئًا ما ، يظهر مربع الإكمال التلقائي الذي يقترح عدة تنبؤات حول كيفية إكمال لاستعلامك مما يعني أنه معروض عدة اقتراحات تتعلق بـ استفسارك. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [شريط بحث الإكمال التلقائي].

 

في الفيديو ، شاهدت شريط البحث مع اقتراحات بحث الإكمال التلقائي ولا يوجد استعلام مستخدم يتعلق بالمحتوى لذلك قمت بإعادة توجيه استعلام المستخدم إلى Google ولكن يمكنك إظهار المحتوى الخاص بك وآمل أن تكون قد فهمت الرموز أو المفاهيم الأساسية وراء الإنشاء مربع نص الإكمال التلقائي هذا أو مربع البحث.

 

إذا كنت تعرف PHP و MySQL ، فيمكنك استخدام شريط البحث هذا لاسترداد أو إظهار العديد من اقتراحات البحث المتعلقة باستعلامات المستخدم من قاعدة البيانات الخاصة بك. إذا كنت تحب هذا البرنامج وترغب في الحصول على ملفات المصدر أو أكواد هذا البرنامج ، فأنت بحاجة إلى التمرير لأسفل قليلاً.

 

شريط البحث مع بحث الإكمال التلقائي

لإنشاء هذا البرنامج (اقتراحات البحث الإكمال التلقائي). أولاً ، تحتاج إلى إنشاء أربعة ملفات ، ملف HTML واحد ، وملف CSS ، واثنان عبارة عن ملفات JavaScript. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow