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

Hai All ketemu lagi bersama saya portgastea pria tampan asli sunda..hehetutorial kali ini kita akan Membuat الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax and jQuery.

Ok langsung ajapertama kita buat file koneksi.php seperti dibawah ini

<?بي أتش بي
    حدد('_HOST_NAME', "مضيف محلي");
    حدد('_DATABASE_USER_NAME', 'جذر');
    حدد('_DATABASE_PASSWORD', "12345");
    حدد('_DATABASE_NAME', 'tutorial');
 
    $dbConnection = جديد mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
    إذا ($dbConnection->connect_error) {
        trigger_error('Connection Failed: "  . $dbConnection->connect_error, E_USER_ERROR);
    }
?>

Selanjutnya kita buat file index.php seperti dibawah ini

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <رئيس>
  4. <meta charset="utf-8">
  5. <عنوان>الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax and 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. <!-- Le styles -->
  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. padding-top: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
  17. }
  18. .web{
  19. font-family:tahoma;
  20. size:12مقصف;
  21. أعلى:10%;
  22. border:1px solid #CDCDCD;
  23. border-radius:10مقصف;
  24. حشوة:10مقصف;
  25. width:38%;
  26. margin:auto;
  27. }
  28. #search_keyword_id
  29. {
  30. width:300مقصف;
  31. border:solid 1px #CDCDCD;
  32. حشوة:10مقصف;
  33. font-size:14مقصف;
  34. }
  35. #نتيجة
  36. {
  37. position:absolute;
  38. width:320مقصف;
  39. display:none;
  40. margin-top:-1مقصف;
  41. border-top:0مقصف;
  42. overflow:hidden;
  43. border:1px #CDCDCD solid;
  44. background-color: white;
  45. }
  46. .show
  47. {
  48. font-family:tahoma;
  49. حشوة:10مقصف;
  50. border-bottom:1px #CDCDCD dashed;
  51. font-size:15مقصف;
  52. }
  53. .show:hover
  54. {
  55. background:#364956;
  56. color:#FFF;
  57. cursor:المؤشر;
  58. }
  59. </أسلوب>
  60. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  61.  
  62. <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  63. <!--[if lt IE 9]>
  64. <script src="../assets/js/html5shiv.js"></النصي>
  65. <![إنهاء إذا]-->
  66.  
  67. <!-- Fav and touch icons -->
  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 class='web'>
  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">Gudang Teknologi & Informasi</p>
  109. <p>&copy; <a href="http://andeznet.com">www.andeznet.com</أ>&nbsp<?بي أتش بي صدى صوت date("Y");?></p>
  110. </شعبة><!--/span-->
  111. </شعبة><!--/row-->
  112. </شعبة><!--/span-->
  113. </شعبة><!--/row-->
  114.  
  115. </شعبة>
  116. <script src="assets/js/jquery-1.8.3.min.js"></النصي>
  117. <script type="text/javascript">
  118. $(وظيفة(){
  119. $(".cari_keyword").keyup(وظيفة()
  120. {
  121. var cari_keyword_value = $(this).val();
  122. var dataString = 'cari_keyword='+ cari_keyword_value;
  123. إذا(cari_keyword_value!='')
  124. {
  125. $.ajax({
  126. type: "POST",
  127. عنوان url: "cari.php",
  128. البيانات: dataString,
  129. cache: خاطئة,
  130. success: وظيفة(لغة البرمجة)
  131. {
  132. $("#result").لغة البرمجة(لغة البرمجة).show();
  133. }
  134. });
  135. }
  136. return false;
  137. });
  138.  
  139. $("#result").live("click",وظيفة(e){
  140. var $clicked = $(e.target);
  141. var $name = $clicked.find('.nama_siswa').لغة البرمجة();
  142. var decoded = $("<div/>").لغة البرمجة($name).text();
  143. $('#cari_keyword_id').val(decoded);
  144. });
  145.  
  146. $(document).live("click", وظيفة(e) {
  147. var $clicked = $(e.target);
  148. إذا (! $clicked.hasClass("cari_keyword")){
  149. $("#result").fadeOut();
  150. }
  151. });
  152.  
  153. $('#cari_keyword_id').click(وظيفة(){
  154. $("#result").fadeIn();
  155. });
  156. });
  157. </النصي>
  158.  
  159.  
  160. <script src="assets/js/bootstrap.min.js"></النصي>
  161.  
  162. </الجسم>
  163. </لغة البرمجة>

Nah Terakhir kita buat deh file cari.php dan masukan script dibawah ini

<?بي أتش بي
    تضمن('koneksi.php');
    إذا(ايسيت($_بريد['cari_keyword']))
    {
        $cari_keyword = $dbConnection->real_escape_string($_بريد['cari_keyword']);
        $sqlSiswa="SELECT id_daftar,s_nama FROM master WHERE s_nama LIKE '%$cari_keyword%"";
        $resSiswa=$dbConnection->query($sqlSiswa);
 
        إذا($resSiswa === خاطئة) {
            trigger_error('Error: " . $dbConnection->error, E_USER_ERROR);
        }آخر{
            $rows_returned = $resSiswa->num_rows;
        }
 
 $bold_cari_keyword = "<قوي>".$cari_keyword."</قوي>";
 إذا($rows_returned > 0){
            في حين($rowSiswa = $resSiswa->fetch_assoc()) 
            { 
                صدى صوت "<div class="show" align="left"><span class="nama_siswa">".str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama'])."</امتداد></شعبة>"; 
            }
        }آخر{
            صدى صوت "<div class="show" align="left">No matching records.</شعبة>"; 
        }
    } 
?>

Mudah bukan?? hehe jika sudah berhasil maka akan tampil seperti gambar dibawah ini

autocomplete

Sekian Tutorial kali ini semoga bermanfaat untuk download sourcecode lengkap nya bisa download disini

Terima kasih HAPPY CODING & PROGRAMING



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 *