كيفية عمل شريط بحث بسيط باستخدام قائمة سلاسل في JavaScript

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

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

ومع ذلك ، يمكنك أيضًا إنشاء شريط بحث بسيط باستخدام Vanilla JavaScript ، والذي يقارن مدخلات المستخدم بقائمة من السلاسل.

كيفية إضافة واجهة المستخدم لشريط البحث

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

1. قم بإنشاء مجلد لتخزين موقع الويب الخاص بك. داخل المجلد ، قم بإنشاء ملف HTML باسم index.html.
instagram viewer
2. املأ ملفك بالبنية الأساسية لمستند HTML. إذا لم تكن معتادًا على استخدام HTML ، فهناك الكثير منها أمثلة كود HTML يمكنك تعلمها لمساعدتك في الحصول على السرعة.

   <! DOCTYPE html>
   <أتش تي أم أل لانج ="en-US">
   <رأس>
   <عنوان>شريط البحث</title>
   </head>
   <جسم>
   <فئة div ="حاوية">
   <! - يظهر محتوى صفحة الويب هنا ->
   </div>
   </body>
   </html>

3. داخل فئة الحاوية div ، أضف علامة إدخال. سيسمح هذا للمستخدم بكتابة النص الذي يود البحث عنه. كلما أدخلوا حرفًا جديدًا ، سيقوم موقع الويب الخاص بك باستدعاء وظيفة البحث (). ستقوم بإنشاء هذه الوظيفة في خطوات لاحقة.

   <فئة div ="حاوية">
   <h2>البحث في البلدان</h2>
   <معرف الإدخال ="شريط البحث" الإكمال التلقائي ="عن" عند المفتاح ="يبحث()" اكتب ="نص"
    الاسم ="يبحث" نائب ="ما الذي تبحث عنه؟">
   </div>

   تضمن سمة الإكمال التلقائي أن المتصفح لن يضيف القائمة المنسدلة الخاصة به بناءً على مصطلحات البحث السابقة.
4. في نفس المجلد الخاص بك index.html ملف ، قم بإنشاء ملف CSS جديد يسمى Styles.css.
5. قم بتعبئة الملف بنمط لصفحة الويب العامة وشريط البحث:

   جسم {
    الهامش: 0؛
    حشوة: 0 ؛
    لون الخلفية: # f7f7f7 ؛
   }
   * {
    خط العائلة: "اريال"، بلا الرقيق؛
   }
   .حاوية {
    الحشو: 100 بكسل 25٪ ؛
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
    ارتفاع الخط: 2rem ؛
   حجم الخط: 1.2em;
    لون: رقم 202C39 ؛
   }
   #searchbar {
    الحشو: 15 بكسل ؛
    نصف قطر الحدود: 5 بكسل ؛
   }
   مدخل[نوع = نص] {
   -webkit- الانتقال: عرض 0.15 ثانيةسهولة في الخروج;
   انتقال: عرض 0.15 ثانيةسهولة في الخروج;
   }

6. في index.html، أضف رابطًا إلى ملف CSS الخاص بك داخل علامة الرأس وتحت علامة العنوان:

   <ارتباط rel ="ورقة الأنماط" href ="Styles.css">

7. افتح ال index.html ملف في مستعرض ويب ، واعرض واجهة المستخدم لشريط البحث الخاص بك.

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

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

يمكنك إنشاء هذه القائمة ديناميكيًا باستخدام JavaScript أثناء تحميل الصفحة.

1. داخل index.html، أسفل علامة الإدخال ، أضف div. سيعرض div قائمة منسدلة تحتوي على قائمة بالعناصر التي تطابق ما يبحث عنه المستخدم:

   <معرف div ="قائمة"></div>

2. في نفس المجلد الخاص بك index.html ملف و Styles.css ملف ، قم بإنشاء ملف جديد يسمى script.js.
3. داخل script.js، قم بإنشاء وظيفة جديدة تسمى loadSearchData (). داخل الوظيفة ، قم بتهيئة مصفوفة بقائمة سلاسل. ضع في اعتبارك أن هذه قائمة صغيرة ثابتة. يجب أن يأخذ التنفيذ الأكثر تعقيدًا في الاعتبار البحث في مجموعات البيانات الأكبر.

   وظيفةloadSearchData() {
   // البيانات التي سيتم استخدامها في شريط البحث
   يترك البلدان = [
   'أستراليا',
   'النمسا',
   'البرازيل',
   'كندا',
   'الدنمارك',
   'مصر',
   'فرنسا',
   'ألمانيا',
   'الولايات المتحدة الأمريكية',
   'فيتنام'
    ];
   }

4. داخل loadSearchData () وتحت المصفوفة الجديدة ، احصل على عنصر div الذي سيعرض عناصر البحث المطابقة للمستخدم. داخل قائمة div ، أضف علامة ربط لكل عنصر بيانات في القائمة:

   // احصل على عنصر HTML من القائمة
   يترك قائمة = وثيقة.getElementById ("قائمة") ؛
   // أضف كل عنصر بيانات كملف  بطاقة شعار
   بلدان.لكل((البلد) => {
   يترك أ = وثيقة.createElement ("a") ؛
    a.innerText = البلد ؛
    a.classList.add ("قائمة الاغراض");
   قائمة.appendChild (a) ،
   })

5. في علامة الجسم من index.html، أضف سمة حدث onload لاستدعاء وظيفة loadSearchData () الجديدة. سيؤدي هذا إلى تحميل البيانات أثناء تحميل الصفحة.

   <تحميل الجسم ="loadSearchData ()">

6. في index.html، قبل انتهاء علامة النص الأساسي ، أضف علامة نص برمجي لربطها بملف جافا سكريبت الخاص بك:

   <تحميل الجسم ="loadSearchData ()">
   <! - محتوى صفحة الويب الخاصة بك ->
   <النصي src ="script.js"></script>
   </body>

7. في Styles.css، أضف بعض الأنماط إلى القائمة المنسدلة:

   #قائمة {
    الحدود: 1 بكسل ضوء رمادي صلب ؛
    نصف قطر الحدود: 5 بكسل ؛
    العرض محجوب؛
   }
   .قائمة الاغراض {
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
    زخرفة النص: لا شيء ؛
    الحشو: 5 بكسل 20 بكسل ؛
    لون أسود؛
   }
   .قائمة الاغراض:يحوم {
    لون الخلفية: lightgrey.
   }

8. يفتح index.html في متصفح الويب لعرض شريط البحث وقائمة نتائج البحث المتاحة. لا تعمل وظيفة البحث حتى الآن ، ولكن يجب أن ترى واجهة المستخدم التي ستستخدمها:

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

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

1. في Styles.css، استبدل نمط القائمة لإخفاء القائمة افتراضيًا:

   #قائمة {
    الحدود: 1 بكسل ضوء رمادي صلب ؛
    نصف قطر الحدود: 5 بكسل ؛
    عرض لا شيء؛
   }

2. في script.js، قم بإنشاء وظيفة جديدة تسمى البحث (). ضع في اعتبارك أن البرنامج سيستدعي هذه الوظيفة في كل مرة يدخل فيها المستخدم أو يزيل حرفًا من شريط البحث. ستحتاج بعض التطبيقات إلى رحلات إلى الخادم لجلب المعلومات. في مثل هذه الحالات ، قد يؤدي هذا التنفيذ إلى إبطاء واجهة المستخدم الخاصة بك. قد تحتاج إلى تعديل التنفيذ لأخذ ذلك في الاعتبار.

   وظيفةيبحث() {
   // وظيفة البحث هنا
   }

3. داخل وظيفة search () ، احصل على عنصر div HTML للقائمة. احصل أيضًا على عناصر علامة ارتساء HTML لكل عنصر داخل القائمة:

   يترك listContainer = وثيقة.getElementById ("قائمة") ؛
   يترك listItems = وثيقة.getElementsByClassName ('listItem') ،

4. احصل على المدخلات التي أدخلها المستخدم في شريط البحث:

   يترك الإدخال = وثيقة.getElementById ("شريط البحث"). القيمة
   المدخلات = input.toLowerCase () ، 

5. قارن مدخلات المستخدم بكل عنصر في القائمة. على سبيل المثال ، إذا أدخل المستخدم "أ" ، فستقارن الوظيفة إذا كانت "أ" داخل "أستراليا" ، ثم "النمسا" ، و "البرازيل" ، و "كندا" ، وهكذا. إذا تطابقت ، فسيتم عرض هذا العنصر في القائمة. إذا لم يتطابق ، فسيخفي هذا العنصر.

   يترك النتائج = حقيقي;
   لـ (أنا = 0 ؛ أنا < listItems.length؛ أنا ++) { 
    if (! listItems [i] .innerHTML.toLowerCase (). تتضمن (المدخلات) || المدخلات "") {
    listItems [i] .style.display ="لا أحد";
   يكمل;
    }
   آخر {
    listItems [i] .style.display ="ثني";
    النتائج = خطأ شنيع; 
    }
   }

6. إذا لم تكن هناك نتائج على الإطلاق في القائمة ، قم بإخفاء القائمة تمامًا:

   listContainer.style.display = noResults؟ "لا أحد": "حاجز";

7. اضغط على index.html ملف لفتحه في متصفح الويب.
8. ابدأ الكتابة في شريط البحث. أثناء الكتابة ، سيتم تحديث قائمة النتائج لعرض النتائج المتطابقة فقط.

استخدام شريط البحث للبحث عن نتائج مطابقة

الآن بعد أن عرفت كيفية إنشاء شريط بحث مع تحديد سلسلة ، يمكنك إضافة المزيد من الوظائف.

على سبيل المثال ، يمكنك إضافة روابط إلى علامات الربط الخاصة بك لفتح صفحات مختلفة بناءً على النتيجة التي ينقر عليها المستخدم. يمكنك تغيير شريط البحث للبحث في كائنات أكثر تعقيدًا. يمكنك أيضًا تعديل الكود للعمل مع أطر عمل مثل React.