Aŭtokompleta Serĉo ĉe PHP, MySQLi, Ajax kaj jQuery

de · Julio 31, 2015

Saluton Ĉiuj, renkontu denove kun mi portgastea, belulo el Sunda.. hehe… ĉi tiun lernilon ni faros Fari Aŭtokompleta Serĉo ĉe PHP, MySQLi, Ajax kaj jQuery.

Bone, nur antaŭen… unue ni kreas connection.php-dosieron kiel sube

Fontkodo   
<?php
    difini('_HOST_NAME', 'loka gastiganto');
    difini('_DATABASE_USER_NAME', 'radiko');
    difini('_DATABASE_PASSWORD', '12345');
    difini('_DATABASE_NAME', 'lernilo');
 
    $dbConnection = nova mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATUMARKO_PASSWORD, _DATABASE_NAME);
    se ($dbConnection->konekti_eraron) {
        ellasilo_eraro('Konekto Malsukcesis: '  . $dbConnection->konekti_eraron, E_USER_ERROR);
    }
?>

Poste ni kreas index.php-dosieron kiel sube

Fontkodo   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <kapo>
  4.     <meta charset="utf-8">
  5.     <titolo>Aŭtokompleta Serĉo ĉe PHP, MySQLi, Ajax kaj jQuery </titolo>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.  
  10.     <!-- La stiloj ->
  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. 	korpo {
  16.         remburpinto: 60px; /* 60px por igi la ujon iri ĝis la fundo de la supra stango */
  17.       }
  18.  .retejo{
  19.  tiparo-familio:tahoma;
  20.  grandeco:12px;
  21.  supro:10%;
  22.  limo:1px solida #CDCDCD;
  23.  limo-radiuso:10px;
  24.  remburaĵo:10px;
  25.  larĝo:38%;
  26.  rando:aŭtomate;
  27.  }
  28.  #serĉo_ŝlosilvorto_id
  29.  {
  30.  larĝo:300px;
  31.  limo:solida 1px #CDCDCD;
  32.  remburaĵo:10px;
  33.  tiparo-grandeco:14px;
  34.  }
  35.  #rezulto
  36.  {
  37.  pozicio:absoluta;
  38.  larĝo:320px;
  39.  ekrano:neniu;
  40.  marĝeno-supro:-1px;
  41.  limo-supro:0px;
  42.  superfluo:kaŝita;
  43.  limo:1px #CDCDCD solida;
  44.  fonkoloro: blanka;
  45.  }
  46.  .montri
  47.  {
  48.  tiparo-familio:tahoma;
  49.  remburaĵo:10px; 
  50.  limo-fundo:1px #CDCDCD strekita;
  51.  tiparo-grandeco:15px; 
  52.  }
  53.  .montri:ŝvebi
  54.  {
  55.  fono:#364956;
  56.  koloro:#FFF;
  57.  kursoro:montrilo;
  58.  }
  59. </stilo>
  60.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  61.  
  62.     <!-- HTML5-ŝimeto, por IE6-8-subteno de HTML5-elementoj ->
  63.     <!--[se IE 9]>
  64.       <script src="../assets/js/html5shiv.js"></skripto>
  65.     <![endif]-->
  66.  
  67.     <!-- Fav kaj tuŝaj ikonoj ->
  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.   </kapo>
  74.  
  75.   <korpo>
  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"></interspaco>
  81.             <span class="icon-bar"></interspaco>
  82.             <span class="icon-bar"></interspaco>
  83.           </butono>
  84.           <a class="brand" href="http://andeznet.com">AndezNet</a>
  85.           <div class="nav-collapse collapse">
  86.             <ul class="nav">
  87.               <ĉe la><a href="active">Hejmo</a></ĉe la>
  88.  
  89.             </la>
  90.           </div><!--/.nav-kolapso ->
  91.         </div>
  92.       </div>
  93.     </div>
  94.  
  95.  
  96. 	<div class="container">
  97. 	<div class='retejo'>
  98.         <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." />
  99.         <div id="result"></div>
  100.     </div>
  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"></a>
  107. 				  <h2>www.andeznet.com</h2>
  108. 				  <p class="text-info">Teknologia Stokejo & Informoj</p>
  109. 				  <p>&kopii; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php eoo dato("Y");?></p>
  110. 				</div><!--/interspaco-->
  111. 			  </div><!--/vico-->
  112. 			</div><!--/interspaco-->
  113. 	</div><!--/vico-->
  114.  
  115. 	</div>
  116.     <script src="assets/js/jquery-1.8.3.min.js"></skripto>
  117. 	<script type="text/javascript">
  118. $(funkcio(){
  119. $(".cari_keyword").klavo(funkcio() 
  120. { 
  121.     var cari_keyword_value = $(ĉi tio).val();
  122.     var dataString = 'search_keyword='+ search_keyword_value;
  123.     se(cari_keyword_value!='')
  124.     {
  125.         $.ajax({
  126.             tajpu: "POST",
  127.             url: "cari.php",
  128.             datumoj: dataString,
  129.             kaŝaĵo: malvera,
  130.             sukceson: funkcio(html)
  131.                 {
  132.                     $("#result").html(html).montri();
  133.                 }
  134.         });
  135.     }
  136.     revenu malvera;    
  137. });
  138.  
  139. $("#result").vivi("click",funkcio(e){
  140.     var $klakita = $(e.celo);
  141.     var $nomo = $klakita.trovi('.studenta nomo').html(); 
  142.     var malkodita = $("<div/>").html($nomo).teksto();
  143.     $('#cari_keyword_id').val(malkodita);
  144. });
  145.  
  146. $(dokumento).vivi("click", funkcio(e) { 
  147.     var $klakita = $(e.celo);
  148.     se (! $clicked.hasClass("cari_keyword")){
  149.         $("#result").fadeOut(); 
  150.     }
  151. });
  152.  
  153. $('#cari_keyword_id').klaku(funkcio(){
  154.     $("#result").fadeIn();
  155. });
  156. });
  157. </skripto>
  158.  
  159.  
  160. 	<script src="assets/js/bootstrap.min.js"></skripto>
  161.  
  162.   </korpo>
  163. </html>

Nun, finfine, ni kreu search.php-dosieron kaj enigu la skripton sube

Fontkodo   
<?php
    inkluzivi('connection.php');
    se(isset($_POST['serĉo_ŝlosilvorto']))
    {
        $serĉo_ŝlosilvorto = $dbConnection->reala_escape_string($_POST['serĉo_ŝlosilvorto']);
        $sqlSiswa="SELECT id_daftar,s_nama DE majstro WHERE s_nama LIKE '%$serĉo_ŝlosilvorto%'";
        $resSiswa=$dbConnection->demando($sqlSiswa);
 
        se($resSiswa === malvera) {
            ellasilo_eraro(— Eraro: ' . $dbConnection->eraro, E_USER_ERROR);
        }alie{
            $vicoj_revenitaj = $resSiswa->nombro_vicoj;
        }
 
 $bold_cari_keyword = '<forta>'.$serĉo_ŝlosilvorto.'</forta>';
 se($vicoj_revenitaj > 0){
            dum($vicoStudentoj = $resSiswa->fetch_assoc()) 
            { 
                eoo '<div class="show" align="left"><span class="nama_siswa">'.str_place($serĉo_ŝlosilvorto,$bold_cari_keyword,$vicoStudentoj['s_nomo']).'</interspaco></div>'; 
            }
        }alie{
            eoo '<div class="show" align="left">Neniuj kongruaj rekordoj.</div>'; 
        }
    } 
?>

Facila ĉu ne?? hehe se ĝi sukcesos ĝi aspektos kiel la suba bildo

aŭtomata kompletigo

Do ĉi tiu lernilo, espereble estos utila por elŝuti la kompletan fontkodon, vi povas elŝuti ĝin ĉi tie

Dankon FELIĈA KODADO & PROGRAMADO



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.