كيفية حقن العناصر عند طلبها في search box

Samer Alashqar · 5 مارس 2022

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

اريد عند بحث المستخدم عن عنصر اقوم بحقن العناصر التي تطابق بحثه لا اريد ان اضعها في الصفحة و اقوم باخفائها ثم اظهر العناصر التي تطابق بحثه لانها ربما ستجعل الموقع ابطأ اخذ بعين الاعتبار ان ال search box سيقوم بالبحث في الموقع باكمله

<input type="text" class="search-box">

        <ul id="myList">
            <li>welcom</li>
            <li>helo</li>
            <li>test</li>
        </ul>

 $(document).ready(function(){
          $(".search-box").on("keyup", function() {
            var value = $(this).val();
            

              $('#myList li').filter(function() { 
                $(this).toggle($(this).text().indexOf(value) > -1)
            });
        });
      });

Wael Aljamal · 5 مارس 2022

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

في معظم الحالات عمل استعلام AJAX هو الحل الأفضل لصندوق البحث.

شيفرة أجاكس ستكون تقريبا كما يلي:

$("form").on("keyup", function() {
  $.ajax({
    method: "post",
    url: "search.php",
    data: {q: $(this).val()},               // تمرير الاستعلام
    success: function(result) {  // جلب النتيجة
      $("#result-list").html(result);  // إسناد النتيجة للقائمة
    },
    error: function() {
      console.log("error");
    }
  });
})

يعمل AJAX على إرسال طلبية HTTP Request ألى الخادم، server حيث نرسلها لرابط معين، نفس فكرة HTML Form حيث نحدد المسار و الطريقة post - get .. و تكون البيانات عبارة عن مفتاح-قيمة ترسل للمخدم.

إن افترضنا أنك تتصل على ملف php فإن أي محتوى يتم طباعته مثلا باستخدام echo يتم استقباله في دالة نجاح الطلبية في شيفرة جافاسكربت/أجاكس.. success callback function, ثم باستخدام دوال جافاسكربت التي تعدل على DOM يمكنك حشر المحتوى بالطريقة التي تريدها.

يمكنك الاستفادة من المقالة التالية:

والسؤال والإجابة التالية:

كيفية حقن العناصر عند طلبها في search box

السؤال

Samer Alashqar

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية