自動完成輸入數據php/jquery/mysqli

我已經使這個應用程序在哪裏尋找結果和jQuery自動填充我。我想知道的是，當自動完成第一個「cari_keyword_id」字段並單擊我時，會自動填充另一個輸入，即用戶標識。怎麼可能？我需要第二步，填寫第一個字段自動填充。自動完成輸入數據php/jquery/mysqli

我希望你能幫助我或給我信息！

問候!!!

CODE

的index.php

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Autocomplete Search dengan PHP, MySQLi, Ajax and jQuery </title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
     <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen"> 
     <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="../assets/js/html5shiv.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="assets/ico/favicon.png"> 
    </head> 

    <body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="http://andeznet.com">AndezNet</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li><a href="active">Home</a></li> 

      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 


    <div class="container"> 
    <div class='web'> 
     <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." /> 
      <input type="text" class="cari_keyword form-control" id="cari_jrsn_pil1_id" placeholder="ID..." /> 
     <div id="result"></div> 
    </div> 

    <div class="row-fluid"> 
      <div class="span12"> 
       <div class="row-fluid"> 
       <div class="alert alert-info"> 
        <a name="contact"></a> 
        <h2>www.andeznet.com</h2> 
        <p class="text-info">Gudang Teknologi & Informasi</p> 
        <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p> 
       </div><!--/span--> 
       </div><!--/row--> 
      </div><!--/span--> 
    </div><!--/row--> 

    </div> 
    <script src="assets/js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
$(function(){ 
$(".cari_keyword").keyup(function() 
{ 
    var cari_keyword_value = $(this).val(); 
    var dataString = 'cari_keyword='+ cari_keyword_value; 
    if(cari_keyword_value!='') 
    { 
     $.ajax({ 
      type: "POST", 
      url: "cari.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
       { 
        $("#result").html(html).show(); 
       } 
     }).done(function(respuesta){ 
         $("#nombre").val(respuesta.nombre); 
        }); 
    } 
    return false;  
}); 

$("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.find('.nama_siswa').html(); 
    var decoded = $("<div/>").html($name).text(); 
    $('#cari_keyword_id').val(decoded); 
}); 

$(document).live("click", function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.hasClass("cari_keyword")){ 
     $("#result").fadeOut(); 
    } 
}); 

$('#cari_keyword_id').click(function(){ 
    $("#result").fadeIn(); 
}); 
}); 
</script> 


    <script src="assets/js/bootstrap.min.js"></script> 

    </body> 
</html>

cari.php

<?php 
    include('koneksi.php'); 
    if(isset($_POST['cari_keyword'])) 
    { 
     $cari_keyword = $dbConnection->real_escape_string($_POST['cari_keyword']); 
     $sqlSiswa="SELECT id_daftar,s_nama FROM master WHERE s_nama LIKE '%$cari_keyword%'"; 
     $resSiswa=$dbConnection->query($sqlSiswa); 

     if($resSiswa === false) { 
      trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR); 
     }else{ 
      $rows_returned = $resSiswa->num_rows; 
     } 

$bold_cari_keyword = '<strong>'.$cari_keyword.'</strong>'; 
if($rows_returned > 0){ 
      while($rowSiswa = $resSiswa->fetch_assoc()) 
      { 
       echo '<div class="show" align="left"><span class="nama_siswa">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>'; 
      } 
     }else{ 
      echo '<div class="show" align="left">No matching records.</div>'; 
     } 
    } 
?>

table.sql

CREATE TABLE IF NOT EXISTS `master` (
`id_daftar` int(5) NOT NULL, 
    `s_nama` varchar(150) NOT NULL, 
    `s_jk` int(1) NOT NULL, 
    `s_agama` int(1) NOT NULL, 
    `s_tmp_lahir` varchar(100) NOT NULL, 
    `s_tgl_lahir` date NOT NULL, 
    `jrsn_pil1` int(4) NOT NULL, 
    `jrsn_pil2` int(4) NOT NULL, 
    `tgl_daftar` date NOT NULL, 
    `nisn` varchar(15) NOT NULL, 
    `noreg` varchar(10) NOT NULL, 
    `Alamat` text NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ; 

INSERT INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, `nisn`, `noreg`, `Alamat`) VALUES 
(30, 'GUSTI SUMAINDRA', 1, 1, 'sadadad', '2009-03-01', 1103, 1254, '2015-04-08', '0001', '0001', ''), 
(31, 'AFIF PRASETYA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-08', '0002', '0002', '');

koneksi.php

<?php 
    define('_HOST_NAME', 'localhost'); 
    define('_DATABASE_USER_NAME', 'root'); 
    define('_DATABASE_PASSWORD', ''); 
    define('_DATABASE_NAME', 'prueba'); 

    $dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME); 
    if ($dbConnection->connect_error) { 
     trigger_error('Connection Failed: ' . $dbConnection->connect_error, E_USER_ERROR); 
    } 
?>

來源

2016-04-26 JMF

您可以使用數據屬性的詳細信息如下：

echo '<div class="show" align="left"><span class="nama_siswa" data-id="'.$rowSiswa['id_daftar'].'">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>';

現在你有兩個名字，並用結果用戶點擊相關的標識。您可以使用它來更改其他輸入。

$("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $clickedKeyword = $clicked.find('.nama_siswa'); 
    var $name = $clickedKeyword.html(); 
    var id = $clickedKeyword.data('id'); 
    var decoded = $("<div/>").html($name).text(); 
    $('#cari_keyword_id').val(decoded); 
    $('#cari_jrsn_pil1_id').val(id); 
});

希望這會有所幫助。

來源

2016-04-26 20:55:28 colburton

非常感謝你！這是我想要的！ :)現在我會嘗試在自動填充中顯示的這兩個數據插入一個BD給一個按鈕發送！我必須趕上jquery，或者我可以從輸入插入？ @colburton – JMF

我不確定你的意思是「BD」，但可以像下面這樣插入一個提交按鈕：$（'。web'）。append（''） – colburton

自動完成輸入數據php/jquery/mysqli

回答

相關問題