الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery

مرحبًا بالجميع ، قابلني مرة أخرى مع portgastea ، رجل وسيم من Sunda .. هيهي… هذا البرنامج التعليمي سنفعله صنع الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery.

حسنًا ، تفضل… أولاً نقوم بإنشاء ملف connection.php على النحو التالي

<?بي أتش بي
    حدد("_HOST_NAME", "مضيف محلي");
    حدد("_DATABASE_USER_NAME", 'جذر');
    حدد("_DATABASE_PASSWORD", "12345");
    حدد("_DATABASE_NAME", 'درس تعليمي');
 
    $dbConnection = جديد mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
    إذا ($dbConnection->خطأ في الاتصال) {
        خطأ الزناد('فشل الاتصال: "  . $dbConnection->خطأ في الاتصال, E_USER_ERROR);
    }
?>

بعد ذلك نقوم بإنشاء ملف index.php على النحو التالي

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <رئيس>
  4. <meta charset="utf-8">
  5. <عنوان>الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery </عنوان>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9.  
  10. <!-- الأنماط ->
  11. <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
  12. <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  13.  
  14. <style type="text/css">
  15. الجسم {
  16. أعلى الحشو: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
  17. }
  18. .الويب{
  19. خط العائلة:تاهوما;
  20. بحجم:12مقصف;
  21. أعلى:10%;
  22. الحدود:1بكسل صلب #CDCDCD;
  23. نصف قطر الحد:10مقصف;
  24. حشوة:10مقصف;
  25. عرض:38%;
  26. حافة:تلقاءي;
  27. }
  28. #search_keyword_id
  29. {
  30. عرض:300مقصف;
  31. الحدود:صلب 1px #CDCD;
  32. حشوة:10مقصف;
  33. حجم الخط:14مقصف;
  34. }
  35. #نتيجة
  36. {
  37. وضع:مطلق;
  38. عرض:320مقصف;
  39. عرض:لا شيء;
  40. الهامش العلوي:-1مقصف;
  41. أعلى الحد:0مقصف;
  42. تجاوز:مخفي;
  43. الحدود:1بكسل #CDCDCD صلبة;
  44. لون الخلفية: أبيض;
  45. }
  46. .تبين
  47. {
  48. خط العائلة:تاهوما;
  49. حشوة:10مقصف;
  50. الحد السفلي:1مقصف #CDCDCD متقطع;
  51. حجم الخط:15مقصف;
  52. }
  53. .تبين:يحوم
  54. {
  55. خلفية:#364956;
  56. اللون:#FFF;
  57. المؤشر:المؤشر;
  58. }
  59. </أسلوب>
  60. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  61.  
  62. <!-- HTML5 shim, لدعم IE6-8 لعناصر HTML5 ->
  63. <!--[إذا كان lt IE 9]>
  64. <script src="../assets/js/html5shiv.js"></النصي>
  65. <![إنهاء إذا]-->
  66.  
  67. <!-- الرموز المفضلة واللمس ->
  68. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
  69. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
  70. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
  71. <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  72. <link rel="shortcut icon" href="assets/ico/favicon.png">
  73. </رئيس>
  74.  
  75. <الجسم>
  76. <div class="navbar navbar-inverse navbar-fixed-top">
  77. <div class="navbar-inner">
  78. <div class="container">
  79. <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  80. <span class="icon-bar"></امتداد>
  81. <span class="icon-bar"></امتداد>
  82. <span class="icon-bar"></امتداد>
  83. </زر>
  84. <a class="brand" href="http://andeznet.com">AndezNet</أ>
  85. <div class="nav-collapse collapse">
  86. <ul class="nav">
  87. <في ال><a href="active">الصفحة الرئيسية</أ></في ال>
  88.  
  89. </ال>
  90. </شعبة><!--/.nav-collapse ->
  91. </شعبة>
  92. </شعبة>
  93. </شعبة>
  94.  
  95.  
  96. <div class="container">
  97. <فئة div = "ويب">
  98. <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." />
  99. <div id="result"></شعبة>
  100. </شعبة>
  101.  
  102. <div class="row-fluid">
  103. <div class="span12">
  104. <div class="row-fluid">
  105. <div class="alert alert-info">
  106. <a name="contact"></أ>
  107. <h2>www.andeznet.com</h2>
  108. <p class="text-info">مستودع التكنولوجيا & معلومات</ص>
  109. <ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?></ص>
  110. </شعبة><!--/امتداد-->
  111. </شعبة><!--/صف-->
  112. </شعبة><!--/امتداد-->
  113. </شعبة><!--/صف-->
  114.  
  115. </شعبة>
  116. <script src="assets/js/jquery-1.8.3.min.js"></النصي>
  117. <script type="text/javascript">
  118. $(وظيفة(){
  119. $(".cari_keyword").مفتاح(وظيفة()
  120. {
  121. var cari_keyword_value = $(هذه).فال();
  122. var dataString = 'search_keyword =' ​​+ search_keyword_value;
  123. إذا(cari_keyword_value!= ")
  124. {
  125. $.أياكس({
  126. نوع: "POST",
  127. عنوان url: "cari.php",
  128. البيانات: سلسلة البيانات,
  129. مخبأ: خاطئة,
  130. نجاح: وظيفة(لغة البرمجة)
  131. {
  132. $("#result").لغة البرمجة(لغة البرمجة).تبين();
  133. }
  134. });
  135. }
  136. عودة كاذبة;
  137. });
  138.  
  139. $("#result").حي("click",وظيفة(ه){
  140. تم النقر على var $ = $(ه. الهدف);
  141. var $ name = $ clicked.find(". اسم الطالب").لغة البرمجة();
  142. فار فك = $("<div />").لغة البرمجة($اسم).نص();
  143. $("#cari_keyword_id").فال(فك);
  144. });
  145.  
  146. $(وثيقة).حي("click", وظيفة(ه) {
  147. تم النقر على var $ = $(ه. الهدف);
  148. إذا (! $تم النقر عليه("cari_keyword")){
  149. $("#result").تتآكل();
  150. }
  151. });
  152.  
  153. $("#cari_keyword_id").انقر(وظيفة(){
  154. $("#result").اختفي();
  155. });
  156. });
  157. </النصي>
  158.  
  159.  
  160. <script src="assets/js/bootstrap.min.js"></النصي>
  161.  
  162. </الجسم>
  163. </لغة البرمجة>

الآن ، أخيرًا ، دعنا ننشئ ملف search.php وأدخل البرنامج النصي أدناه

<?بي أتش بي
    تضمن("connect.php");
    إذا(ايسيت($_بريد['كلمة البحث']))
    {
        $كلمة البحث = $dbConnection->real_escape_string($_بريد['كلمة البحث']);
        $sql السيسوة="SELECT id_daftar,s_nama من المعلم حيث s_nama مثل٪$كلمة البحث%"";
        $رسيسوا=$dbConnection->استفسار($sql السيسوة);
 
        إذا($رسيسوا === خاطئة) {
            خطأ الزناد('خطأ: " . $dbConnection->خطأ, E_USER_ERROR);
        }آخر{
            $تم إرجاع الصفوف = $رسيسوا->num_rows;
        }
 
 $bold_cari_keyword = "<قوي>".$كلمة البحث."</قوي>";
 إذا($تم إرجاع الصفوف > 0){
            في حين($صف الطلاب = $رسيسوا->fetch_assoc()) 
            { 
                صدى صوت "<div class="show" align="left"><span class="nama_siswa">".str_ireplace($كلمة البحث,$bold_cari_keyword,$صف الطلاب['s_name'])."</امتداد></شعبة>"; 
            }
        }آخر{
            صدى صوت "<div class="show" align="left">لا توجد سجلات مطابقة.</شعبة>"; 
        }
    } 
?>

سهل أليس كذلك?? الكالينجيون إذا نجحت ستبدو مثل الصورة أدناه

الإكمال التلقائي

لذلك هذا البرنامج التعليمي ، نأمل أن يكون من المفيد تنزيل الكود المصدري الكامل ، يمكنك تنزيله هنا

اشكرك ترميز سعيد & برمجة



You may also like...

2 Responses

  1. zuki says:

    terima kasih gan saya sudah download semua nya, semoga berkah ya gan untuk belajar terimakasih

Leave a Reply

Your email address will not be published. Required fields are marked *