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

للقيام بعملية بحث داخل مجموعة من المنتجات نستخدم الدالة عالية المستوى 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 او ....

بتاريخ 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 أي أن العنصر غير موجود في القائمة

بتاريخ 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)

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

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

بتاريخ 3 دقائق مضت قال Mohammad Al Eik:

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

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

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