كيفية اضافة search bar للبحث داخل الموقع

Samer Alashqar · 4 مارس 2022

السلام عليكم ..

اريد ان اضيف search bar داخل موقعي بحيث يقوم بالبحث عن المنتجات بداخل الموقع الخاص بي لكن لا اعرف كيف اقوم بذلك تحديدا ..

بالاضافة الى انني اريد عند بداء كتابة المستخدم و وصوله للحرف الثاني يتم البحث مباشرة دون الانتقال الى صفحة اخرى

مثال على ما اقصده : https://mohaja-uod.com/

اخر ما توصلت اليه :

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

$('#form').submit(function(e) {

        const q = $('#query').val()
      const site = 'http://localhost:8080/';

          e.preventDefault();
          const url = site + q;
          const win = window.open(url);
          win.focus();
  
      })

Mohammad Al Eik · 4 مارس 2022

للقيام بعملية بحث داخل مجموعة من المنتجات نستخدم الدالة عالية المستوى filter

المثال التالي لنوضح العملية:

لنفرض انه لدينا قائمة من المنتجات التالية

<p>Type something in the input field to search the list for specific items:</p>  
<input id="myInput" type="text" placeholder="Search..">
<br>
<ul id="myList">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>

نقوم بكتابة المعالجة المنطقية لعملية البحص باستخدام jquery

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() { //نقوم بتحديد حقل البحث
    var value = $(this).val().toLowerCase(); //نخزن القيمة المدخلة ونحولها الى small letter
    $("#myList li").filter(function() { //نحدد القائمة التي نريد فلترتها ونلحقها بالدالة عالية المستوى
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)//اظهار النتائج
    });
  });
});
</script>

بهذه الطريقة نفلتر القائمة التي لدينا ويمكنك استبدال العناصر li بأي عناصر تريدها سواء div او p او ....

تم التعديل في 4 مارس 2022 بواسطة Mohammad Al Eik

Samer Alashqar · 4 مارس 2022

بتاريخ 1 ساعة قال Mohammad Al Eik:
للقيام بعملية بحث داخل مجموعة من المنتجات نستخدم الدالة عالية المستوى filter

المثال التالي لنوضح العملية:

لنفرض انه لدينا قائمة من المنتجات التالية
<p>Type something in the input field to search the list for specific items:</p>  
<input id="myInput" type="text" placeholder="Search..">
<br>
<ul id="myList">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>
نقوم بكتابة المعالجة المنطقية لعملية البحص باستخدام jquery
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() { //نقوم بتحديد حقل البحث
    var value = $(this).val().toLowerCase(); //نخزن القيمة المدخلة ونحولها الى small letter
    $("#myList li").filter(function() { //نحدد القائمة التي نريد فلترتها ونلحقها بالدالة عالية المستوى
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)//اظهار النتائج
    });
  });
});
</script>
بهذه الطريقة نفلتر القائمة التي لدينا ويمكنك استبدال العناصر li بأي عناصر تريدها سواء div او p او ....

يعطيك العافية اخي لكن هل بامكانك شرح اخر سطر بالتحديد ؟ لانني لم افهمه

 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

Mohammad Al Eik · 4 مارس 2022

 $(this).toggle // هنا تقوم هذه الدالة بإخفاء أي عنصر لايطابف احرفه القيمة المدخلة بالحقل
 ($(this).text().toLowerCase().indexOf(value) > -1) // هنا نقوم بتحويل النص إلة أحرف صغيرة

قمنا بالتحويل إلى أحرف صغيرة لأننا قمنا بتحويل النص داخل حقل الادخال إلى أحرف صغيرة بهذه الحالة لن يحث لدينا مشاكل بصيغة الأحرف

Samer Alashqar · 4 مارس 2022

بتاريخ 3 دقائق مضت قال Mohammad Al Eik:
 $(this).toggle // هنا تقوم هذه الدالة بإخفاء أي عنصر لايطابف احرفه القيمة المدخلة بالحقل
 ($(this).text().toLowerCase().indexOf(value) > -1) // هنا نقوم بتحويل النص إلة أحرف صغيرة 
قمنا بالتحويل إلى أحرف صغيرة لأننا قمنا بتحويل النص داخل حقل الادخال إلى أحرف صغيرة بهذه الحالة لن يحث لدينا مشاكل بصيغة الأحرف

ماذا عن indexOf(value) > -1 لماذا قمنا بتحديد 1- وليس رقم اكبر من ذلك او اصغر ؟

Mohammad Al Eik · 4 مارس 2022

بتاريخ 1 دقيقة مضت قال Samer Alashqar:

ماذا عن indexOf(value) > -1 لماذا قمنا بتحديد 1- وليس رقم اكبر من ذلك او اصغر ؟

indexOf(value) > -1

تعني أن العنصر موجود,

أي لنفرض اننا لدينا القائمة التالية

const arr = ['x' , 'y' , 'z']

arr.indexOf('x') ===> 0

arr.indexOf('z') ===> 2

arr.indexOf('r') ===> -1

الدالة indexOf هي للحصول على مركز العنصر فإذا كان العنصر اكبر من -1 فإن العنصر موجود في القائمة

اما اذا كان ناتج الدالة -1 أي أن العنصر غير موجود في القائمة

كيفية اضافة search bar للبحث داخل الموقع

السؤال

Samer Alashqar

5 أجوبة على هذا السؤال

Recommended Posts

Mohammad Al Eik

Samer Alashqar

Mohammad Al Eik

Samer Alashqar

Mohammad Al Eik

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية