0
私は結果を探し、jqueryで私を自動補完するこのアプリケーションを作った。私が知りたいことは、最初の "cari_keyword_id"フィールドをオートコンプリートして、私がユーザーIDである他の入力を自動的に入力することです。どのように可能ですか？私は最初のフィールドオートコンプリートを入力して、2番目のステップが必要です。オートコンプリート入力データphp/jquery/mysqli
私を助けたり、私に情報を与えてくれることを願っています！
greetingS !!!
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>© <a href="http://andeznet.com">www.andeznet.com</a> <?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);
}
?>
本当にありがとうございます！それは私が望んだものでした！ :)私は、これらの2つのデータを自動補完で表示して、BDを挿入して送信するようにしてみましょう！私はjqueryをキャッチするか、入力から挿入することができますか？ @colburton – JMF
"BD"の意味がわからないのですが、送信ボタンを$（ '。web'）に追加することもできます（append（ '） – colburton