Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
css error atau crash sama css lain?
kenapa auto suggest keluarnya diatas gini yaa?? bentrok dengan css atau gimana??
ini cssnya
#result {
height:10px;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:0px;
margin-bottom:0px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: relative;
left: 0px;
top:0px;
margin: 0px 0px 0px 0px;
width: 900px;
background-color:#69cbf5;
border-top: 1px solid #999999;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}
.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}
#suggest {
position:relative;
}
0
7 Jawaban:
untuk HTMLnya ini *sebagian*
<div class="ui-widget">
<tr>
<td height="50px">Nama</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" class="form-control" id="nama" onKeyUp="suggest(this.value);" onBlur="fill2();" name="nama_penduduk" required data-validation-required-message=""></td>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="suggestionsList"> Â </div>
</tr>
<tr>
<td height="50px">NIK</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" readonly class="form-control" id="nik" name="nik" required data-validation-required-message=""></td>
</tr>
<tr>
<td height="50px">Tempat Lahir</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" readonly class="form-control" id="tempat" name="tempat_lahir" required data-validation-required-message=""></td>
</tr>
<tr>
<td height="50px">Tanggal Lahir</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" readonly class="form-control" id="tanggal" name="tanggal_lahir" required data-validation-required-message=""></td>
</tr>
untuk JSnya ini
<script>
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill2(thisValue) {
$('#nama').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 100);
ini sebagian juga
0
Kenapa enggak dicoba lewat Inspect element dulu ?
1
@WF13 kalo udah berhasil, dishare ya di komentar dan ditandain sebagai jawaban yang benar, masalahnya dimana dan fixnya gimana, biar orang lain bisa belajar
1
Siap mas hilman.. Nanti di share..masih gak bawa laptop :D
0
untuk Formnya pakai JS... ini Form
<div class="ui-widget">
<tr>
<td height="50px">Nama</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" class="form-control" id="nama" onKeyUp="suggest(this.value);" onBlur="fill2();" name="nama_penduduk" required data-validation-required-message=""></td>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img style="position: relative; top: -12px; left: 30px;" />
<div class="suggestionList" id="suggestionsList"> Â </div>
</tr>
<tr>
<td height="50px">NIK</td>
<td width="10px">:</td>
<td colspan="3"><input type="text" readonly class="form-control" id="nik" name="nik" required data-validation-required-message=""></td>
</tr>
untuk JSnya...
<script>
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill2(thisValue) {
$('#nama').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 100);
}function fill3(thisValue) {
$('#nik').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 100);
}function fill4(thisValue) {
$('#tempat').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 100);
}
</script>
untuk Suggest dan cssnya...
[SUGGEST]
<?php
$db = new mysqli('localhost', 'root' ,'', 'mykp');
if(!$db) {
echo 'Tidak dapat terhubung dengan database';
} else {
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
if(strlen($queryString) >0) {
$query = $db->query("SELECT nama,nik,tempat_lahir,tanggal_lahir,agama,jenis_kelamin,status,pendidikan,pekerjaan,alamat FROM penduduk WHERE nama LIKE '$queryString%'");
if($query) {
echo '<ul>';
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill2(\''.addslashes($result->nama).'\');fill3(\''.addslashes($result->nik).'\');fill4(\''.addslashes($result->tempat_lahir).'\');fill5(\''.addslashes($result->tanggal_lahir).'\');fill6(\''.addslashes($result->jenis_kelamin).'\');fill7(\''.addslashes($result->agama).'\');fill8(\''.addslashes($result->status).'\');fill9(\''.addslashes($result->pendidikan).'\');fill10(\''.addslashes($result->pekerjaan).'\');fill11(\''.addslashes($result->alamat).'\');">'.$result->nama.'</li>';
}
echo '</ul>';
} else {
echo 'Maaf! Ada masalah';
}
} else {
// do nothing
}
} else {
echo 'ERROR!';
}
}
?>
dan [CSS]nya
<style>
#result {
height:0px;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:0px;
margin-bottom:0px;
background-color:#FFFF99;
}
#country{
padding:1px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: absolute;
left: 0px;
margin: 45px 10px 50px 240px;
width: 350px;
padding:0px;
background-color: grey;
border-top: 0px solid #999999;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFF;
padding:0;
margin:0;
}
.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}
#suggest {
position:relative;
}
</style>
BERBAGI ITU INDAH
0