Sabtu, September 23Perahu Layar Kertas

Membuat Auto Complete PHP dan Oracle

Anda ingin membuat sebuah kotak pencarian dengan auto complete atau sering (Auto Suggestions), sekarang saya akan mencoba membantu anda dengan database Oracle :

langkah yang pertama buatlah file index.php

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”autoload.js”></script>
<script type=”text/javascript” src=”style.css”></script>

<html><head><title>AutoComplete Oracle</title></head><body><div class=”post”> <h2>CONTOH AUTOCOMPLETE ORACLE</h2> <div class=”entry”> <p>
<form action=”index.php” method=”post” name=”postform”>  <table width=”503″ border=”0″> </tr>  <td>KODE IKAN</td>  <td width=”90″>  <div id=”suggest”>   <input type=”text” onKeyUp=”suggest(this.value);” name=”kode_rekening”  placeholder=”Kode Ikan” onBlur=”fill2();” id=”kode” size=”15″/>    <div class=”suggestionsBox” id=”suggestions” style=”display: none;”>   <div class=”suggestionList” id=”suggestionsList”> &nbsp; </div>   </div>  </div>  </td>  <td width=”234″ align=”left”><input type=”text” disabled=”disabled” name=”nama_rekening” placeholder=”Nama Ikan” onBlur=”fill();” id=”nama”  size=”30″/></td> </tr>  </table> </form> <br />
</p> </div></div></body>

langkah kedua buat file jquery.js [unduh]

langkah ketiga buat file autoload.js


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 fill(thisValue) {
$(‘#nama’).val(thisValue);
setTimeout(“$(‘#suggestions’).fadeOut();”, 100);
}
function fill2(thisValue) {
$(‘#kode’).val(thisValue);
setTimeout(“$(‘#suggestions’).fadeOut();”, 100);
}

langkah keempat buat file style box-nya style.css

<style>
#result {
height:10px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: absolute;
left: 0px;
top:10px;
margin: 16px 0px 0px 0px;
width: 200px;
padding:0px;
background-color:#999999;
–border-top: 3px 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;
}
</style>


langkah selanjutnya buat autosuggest.php

<?php
//Script Koneksi Localhost
$conn1 = oci_connect(“kp”,”andhika”,”localhost/orcl”);
$kursor = ocicommit($conn1);
//Notification Koneksi Localhost
if(!$kursor) {
echo ‘koneksi gagal.’;
} else {
if(isset($_POST[‘queryString’])) {
$queryString = $_POST[‘queryString’];
if(strlen($queryString) >0) {
$query1 = “SELECT JENIS_IKAN_ID,JENIS_IKAN_NAMA FROM JENIS_IKAN WHERE JENIS_IKAN_ID  LIKE ‘$queryString%'”;
$hasil1 = oci_parse($conn1,$query1);
$data1 = oci_execute($hasil1,OCI_DEFAULT);
if($data1) {
echo ‘<ul>’;
while ($result=oci_fetch_row($hasil1)) {
echo ‘<li onClick=”fill(”.addslashes($result[1]).”); fill2(”.addslashes($result[0]).”);”>’.$result[0].’&nbsp;&nbsp;’.$result[1].'</li>’;
}
echo ‘</ul>’;
} else {
echo ‘Terjadi Kesalahan Dalam Source Code’;
}
} else {
//kosongkan
}
} else {
echo ‘Terjadi Kesalahan!’;
}
}
?>

letakan semua file dalam satu folder, screenshot hasil :

Baca Lainnya :   Cara Setting dan Memanipulasi DATE pada Oracle
Screenshot auto complete

 Semoga Bermanfaat.!

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *