Naviego Naviego - 7 months ago 34
Javascript Question

AutoComplete input data php/jquery/mysqli

I have made this application in which to look for a result and with jquery autocomplete me. What do I want to know is that when autocomplete the first "cari_keyword_id" field and click me automatically fill the other input, which is the user ID. How is possible?? I need the second step, taking the first field autocomplete filled.

I hope you can help me or give me information!

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>&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);
}
?>

Answer

You can use a data attribute for more information like this:

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>'; 

Now you have both the name and the id associated with the result the user clicks. You can use this to change the other input.

$("#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);
});

Hope this helps.

Comments