Samer Alashqar نشر 4 مارس 2022 أرسل تقرير نشر 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(); }) 1 اقتباس
0 Mohammad Al Eik نشر 4 مارس 2022 أرسل تقرير نشر 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 1 اقتباس
1 Mohammad Al Eik نشر 4 مارس 2022 أرسل تقرير نشر 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 أي أن العنصر غير موجود في القائمة 1 اقتباس
0 Samer Alashqar نشر 4 مارس 2022 الكاتب أرسل تقرير نشر 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) 1 اقتباس
0 Mohammad Al Eik نشر 4 مارس 2022 أرسل تقرير نشر 4 مارس 2022 $(this).toggle // هنا تقوم هذه الدالة بإخفاء أي عنصر لايطابف احرفه القيمة المدخلة بالحقل ($(this).text().toLowerCase().indexOf(value) > -1) // هنا نقوم بتحويل النص إلة أحرف صغيرة قمنا بالتحويل إلى أحرف صغيرة لأننا قمنا بتحويل النص داخل حقل الادخال إلى أحرف صغيرة بهذه الحالة لن يحث لدينا مشاكل بصيغة الأحرف 1 اقتباس
0 Samer Alashqar نشر 4 مارس 2022 الكاتب أرسل تقرير نشر 4 مارس 2022 بتاريخ 3 دقائق مضت قال Mohammad Al Eik: $(this).toggle // هنا تقوم هذه الدالة بإخفاء أي عنصر لايطابف احرفه القيمة المدخلة بالحقل ($(this).text().toLowerCase().indexOf(value) > -1) // هنا نقوم بتحويل النص إلة أحرف صغيرة قمنا بالتحويل إلى أحرف صغيرة لأننا قمنا بتحويل النص داخل حقل الادخال إلى أحرف صغيرة بهذه الحالة لن يحث لدينا مشاكل بصيغة الأحرف ماذا عن indexOf(value) > -1 لماذا قمنا بتحديد 1- وليس رقم اكبر من ذلك او اصغر ؟ 1 اقتباس
السؤال
Samer Alashqar
السلام عليكم ..
اريد ان اضيف search bar داخل موقعي بحيث يقوم بالبحث عن المنتجات بداخل الموقع الخاص بي لكن لا اعرف كيف اقوم بذلك تحديدا ..
بالاضافة الى انني اريد عند بداء كتابة المستخدم و وصوله للحرف الثاني يتم البحث مباشرة دون الانتقال الى صفحة اخرى
مثال على ما اقصده : https://mohaja-uod.com/
اخر ما توصلت اليه :
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.