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

بواسطة · يوليو 31, 2015

مرحبًا بالجميع ، قابلني مرة أخرى مع 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">لا توجد سجلات مطابقة.</شعبة>"; 
        }
    } 
?>

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

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

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

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



Tags:

You may also like...

2 Responses

  1. zuki says:
    October 2, 2015 at 9:41 pm

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

    Reply

Leave a Reply

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