إنشاء محرك بحث مع إكمال الجملة تلقائيا

محمد الحربي • منذ 6 سنوات

السلام عليكم جميعاً .. :)

في البداية أعتذر لكثرة أسئلتي .. انا احاول ان اجد حلاً بنفسي لكن لم استطع

انا عندي منتجات مخزنة في قاعدة البيانات

واريد ان يصل إليها المستخدم عن طريق البحث لسهولة الوصول

واريد ايضاً ان تتم إكمال الجملة له تلقائيا

على سبيل المثال :

عندما اريد ان ابحث على ايفون

يكفي ان يكتب ايف

وياتيه المنتج ايفون

بهذا الشكل

** اي دون الحاجة للضغط على زر البحث تاتي النواتج تلقائيا عند بدء في الكتابة

كود مبسط للتوضيح

<?php

$conn = mysqli_connect("localhost","root","","products") or die ("Error");
$search = $_POST['search'];
$search_query = "SELECT * FROM products WHERE product_name LIKE '$search%'";
$result = mysqli_query($conn,$search_query);
if($rows = mysqli_num_rows($result) >  0){
 /* bring product name,page */
}
else {
echo "No result";
}
?>

اتمنى وضحت الفكرة :)

كلمات دليلية: bootstrap css html php sql

أعجبني السؤال تابع السؤال شارك السؤال

الإجابة الصحيحة

Abdullah Alhariri • منذ 6 سنوات

وعليكم السلام ورحمة الله وبركاته

ماتبحث عنه هو Auto complete text box وطريقة إنشائه بسيطة جداً إن شاء الله

ولكن لا تكفي php لوحدها لعمل المطلوب يلزمك إعدادت من جهة العميل (Client Side) بإستخدام مكتبة JQuery

وأخرى من جهة الخادوم (Server Side) بإستخدام PHP & Mysql

سنبدء بجهة العميل (Client Side) سنضع الكود التالي :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>//مكتبة الجيكويري
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> //هذه المكتبة هي التي تحتوي على الملئ التلقائي
<title>Title of the document</title>
</head>

<body>
  <label for="skills">products: </label>
  <input id="products">//مربع النص المطلوب
  <script>
    $(function() {
      $( "#products" ).autocomplete({//هذه الدالة هي المسئولة عن مخاطبة السيرفر
        source: 'search.php'//مسار ملف البحث
      });
    });
  </script>
</body>

</html>

- لاحظ أننا إستخدمنا مكتبة Jquery بالاضافة لمكتبة Jquery-Ui وهي التي تحتوي على الدالة autocomplete

- قمنا بجعل مصدر البيانات الخاص بمربع البحث صفحة بإسم search.php والكود الخاص بها كما يلي :


<?php

//الاتصال مع قاعدة البيانات
$conn = mysqli_connect("localhost","root","","products") or die ("Error");
//إستخراج كلمة البحث من كائن الطلب
$searchTerm = $_GET['term'];
//الاستعلام عن الكلمة المطلوبة من قاعدة البيانات
$query = $db->query("SELECT * FROM products WHERE product_name LIKE '%".$searchTerm."%' ORDER BY product_name ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['skill'];
}
//إعادة البيانات للعميل
echo json_encode($data);
?>

السطر التالي للحصول على المدخلات المراد الاستعلام عنها ولاحظ أنها Get وليست Post

$searchTerm = $_GET['term'];

الكلمة term هي الكلمة التي تستخدمها مكتبة Jquery-Ui .

مصدر الأكواد مع تعريب التعليقات و إضافة بعض التعديلات :

أتمنى أن تعمل معك وإذا كان هناك أي ملاحظات أو إستفسارات لا تتردد بطرحها

بالتوفيق إن شاء الله.

الإجابات (5)

محمد الحربي • منذ 6 سنوات

في حالة طلب المزيد من التوضيح الرجاء إبلاغي

Alaa: لو سمحت اذا بدي ابحث بحث جزئي مثلا لو عندي قاعدة بيانات في بلدات وكل بلدة شو اسم المدارس يلي فيها وكتبت بالبحث اول كم حرف من المدينة بعدا فراغ بعدا اول كم حرف من اسم مدرسة كيف ؟

Abdullah Alhariri • منذ 6 سنوات

الإجابة الصحيحة

مميز

وعليكم السلام ورحمة الله وبركاته

ماتبحث عنه هو Auto complete text box وطريقة إنشائه بسيطة جداً إن شاء الله

ولكن لا تكفي php لوحدها لعمل المطلوب يلزمك إعدادت من جهة العميل (Client Side) بإستخدام مكتبة JQuery

وأخرى من جهة الخادوم (Server Side) بإستخدام PHP & Mysql

سنبدء بجهة العميل (Client Side) سنضع الكود التالي :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>//مكتبة الجيكويري
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> //هذه المكتبة هي التي تحتوي على الملئ التلقائي
<title>Title of the document</title>
</head>

<body>
  <label for="skills">products: </label>
  <input id="products">//مربع النص المطلوب
  <script>
    $(function() {
      $( "#products" ).autocomplete({//هذه الدالة هي المسئولة عن مخاطبة السيرفر
        source: 'search.php'//مسار ملف البحث
      });
    });
  </script>
</body>

</html>

- لاحظ أننا إستخدمنا مكتبة Jquery بالاضافة لمكتبة Jquery-Ui وهي التي تحتوي على الدالة autocomplete

- قمنا بجعل مصدر البيانات الخاص بمربع البحث صفحة بإسم search.php والكود الخاص بها كما يلي :


<?php

//الاتصال مع قاعدة البيانات
$conn = mysqli_connect("localhost","root","","products") or die ("Error");
//إستخراج كلمة البحث من كائن الطلب
$searchTerm = $_GET['term'];
//الاستعلام عن الكلمة المطلوبة من قاعدة البيانات
$query = $db->query("SELECT * FROM products WHERE product_name LIKE '%".$searchTerm."%' ORDER BY product_name ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['skill'];
}
//إعادة البيانات للعميل
echo json_encode($data);
?>

السطر التالي للحصول على المدخلات المراد الاستعلام عنها ولاحظ أنها Get وليست Post

$searchTerm = $_GET['term'];

الكلمة term هي الكلمة التي تستخدمها مكتبة Jquery-Ui .

مصدر الأكواد مع تعريب التعليقات و إضافة بعض التعديلات :

أتمنى أن تعمل معك وإذا كان هناك أي ملاحظات أو إستفسارات لا تتردد بطرحها

بالتوفيق إن شاء الله.

محمد الحربي: عند الاستعلام في قاعدة البيانات انت كتبت $db ماهي ؟ هل تقصد $conn ؟

Abdullah Alhariri: نعم هي $conn أعتذر عن هذا الخطأ

محمد الحربي: الناتج يطلع بهذا الشكل No search results. مع انه يوجد منتجات مخزنة في الجدول !

محمد الحربي: شكرا تم حل المشكلة

محمد الحربي • منذ 6 سنوات

يأتي الناتج بهذا الشكل No search results

كود صفحة index.html

<!DOCTYPE html>
<html>
<head>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    
<title> search </title>
</head>
<style>

</style>
        <script>
     $(function() {
         $( "#products" ).autocomplete({
             source: 'search.php',
         });
     });
    </script>
<body>

  <label for="products"> products :  </label>  
   <input id="products">

</body>
</html>

وكود بصفحة search.php

    <?php
     $conn = mysqli_connect('localhost','root','','prodcuts') or die("Error");
    $searchTerm = $_GET['term'];
    $query = $conn->query("SELECT * FROM products WHERE product_name LIKE '%".$searchTerm."%' ORDER BY product_name ASC");
    while ($row = $query->fetch_assoc()){
        $data[] = $row['product_name'];
    }
    echo json_encode($data);
    
    ?>

محمد الحربي: المشكلة طلعت في اسم قاعدة البيانات قلبت بعض الاحرف -_-

Baahr • منذ 3 سنوات

كيف لي ان اصنع شات دردشه

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن