Live Search Using PHP & AJAX

محمود موسى2 · 15 نوفمبر 2020

السلام عليكم، اعمل Live Search بإستخدام php , ajax (حيث يظهر مقترحات للبحث عند كتابة كلمة واحدة)

وتم العمل بالفعل ولكن ينقص شئ وهو عند الضغط على المقترح أريد ان يضع لي نص المقترح في حقل البحث مثل الصورة المرفقة

كتبت هذا الكود لكي ينفذه لي

$(".res li").on("click", function() {
	$("form.add-invoice input[name='product']").val($(this).text());
});

والselectors المذكورة صحيحة 100% وعرفت الخطأ وهو أن عناصر الli تأتي من الdatabase بعد ان يتم الكتابة في خانة البحث ، يعني ان الاب لعناصر الli فارغ في شبكة الdom لأنني عندما اضفت له يدويا في الكود عنصر li تم عمل الكود واشتغل بشكل صحيح فالمشكلة هنا أن الكود لا يعمل بسبب انه لا وجود لعنصر li داخل الاب .res في الdom ولكنه يأتي بعد البحث ولا يكون متضمن في الsource code الخاص بالصفحة.

فهل من افكار اخرى او حل المشكلة؟

كود PHP

<?php
require 'connection.php';
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    if(isset($_POST['q']) && !empty($_POST['q'])){
        $q = $_POST['q'];
        $get_q = $connection->prepare("SELECT name FROM products WHERE name LIKE '$q%'");
        $get_q->execute();
        $search_data = $get_q->fetchAll();
        foreach($search_data as $data){
            echo $out = '<li class="cursor-pointer">' . $data['name'] . '</li>';
        }
    }
}

كود html

<div class="form-group">
  <label for="product">المنتج</label>
  <input type="text" class="form-control" name="product" id="product" placeholder="إسم المنتج" autocomplete="off">
  <div id="r" class="rounded res shadow text-black bg-white pt-2 pb-2 list-unstyled position-absolute px-0">
  </div>
</div>

كود javascript

$("form.add-invoice input[name='product']").on("keyup", function() {
  $.ajax({
    method: "post",
    url: "includes/search.php",
    data: {q: $("form.add-invoice input[name='product']").val()},
    success: function(one) {
      $("#r").html(one);
    },
    error: function() {
      console.log("error");
    }
  });
  $(".res li").on("click", function() {
    $("form.add-invoice input[name='product']").val($(this).text());
  })
})

تم التعديل في 15 نوفمبر 2020 بواسطة محمود رضا موسى

كريم أمعطيل · 15 نوفمبر 2020

بداية يجب عليك وضع الكود :

بتاريخ منذ ساعة مضت قال محمود رضا موسى:

$(".res li").on("click", function() { $("form.add-invoice input[name='product']").val($(this).text()); })

داخل success الخاص بالـajax لأنه إذا وُضع خارج الـajax لن يعمل حيث أن محتوى صندوق .res سيكون فارغ, هذه الخطوة الأولى.

الخطوة الثانية في حال قمت بالتعديل الأول ومع هذا لم يعمل فقم بتغيير أمر الـclick الخاص بالـjquery وإجعله أمر document ثم click أي بهذا الشكل

$(document).on('click', '.res li', function () {
  $("form.add-invoice input[name='product']").val($(this).text());
});

أيضاً يستحسن إستبدال $("form.add-invoice input[name='product']") بـ$(this), لتقليص حجم الكود

هذا هو الكود النهائي :

$("form.add-invoice input[name='product']").on("keyup", function() {
  $.ajax({
    method: "post",
    url: "includes/search.php",
    data: {q: $(this).val()},
    success: function(one) {
      $("#r").html(one);
      $(document).on('click', '.res li', function () {
		 $("form.add-invoice input[name='product']").val($(this).text());
	  });
    },
    error: function() {
      console.log("error");
    }
  });
})

بالتوفيق

تم التعديل في 15 نوفمبر 2020 بواسطة كريم أمعطيل
إضافة الكود الكامل بعد التعديل

Wael Aljamal · 15 نوفمبر 2020

مرحبا محمود،

يوجد طريقتين للحل الأولى هي إسناد المستمع للحدث على مستوى العنصر document بالشكل التالي: (تعمل بحث مرة جديدة عن العناصر جميها في شجرة DOM وتجد العناصر الجديدة)

$(document).on('click', ".res li", function(){
	$("form.add-invoice input[name='product']").val($(this).text());
})

الثانية هي استخدام delegate بدل on في الجزء التالي: (خاصة للاستماع للأحداث من العناصر المضافة حديثا لل DOM)

$(".res li").on("click", function() {
    $("form.add-invoice input[name='product']").val($(this).text());
  })

ليصبح

$(".res li").delegate("click", function() {
    $("form.add-invoice input[name='product']").val($(this).text());
  })

ويوجد حل بسيط هو بتكرار الجزء الذي يستمع لحدث النقر بعد إضافة العناصر الجديدة كالتالي: (إسناد مستمع الأحداث يدويا للعناصر الجديدة)

success: function(one) {
	$("#r").html(one);
	$(".res li").on("click", function() {
		$("form.add-invoice input[name='product']").val($(this).text());
	});
},

فسوف يعمل أيضا

بالتوفيق

تم التعديل في 15 نوفمبر 2020 بواسطة Wael Aljamal
توضيح الإجابة

Live Search Using PHP & AJAX

السؤال

محمود موسى2

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

Recommended Posts

كريم أمعطيل

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية