Membuat Auto Complete PHP dan Oracle

Diposting pada

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 :

Screenshot auto complete

 Semoga Bermanfaat.!

 

Tinggalkan Balasan

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