Membuat AutoComplete Suggest Box menggunakan PHP dan MySQL


Latar Belakang

Saat saya membuat sebuah web (E-Accounting) ada sebuah “kasus” dimana dalam sebuah form, terkadang ada sebuah inputan yang nilainya tidak boleh sembarangan diinput oleh user. dalam kasus ini adalah input nomor rekening (nomor perkiraan).

Alur Program

  1. User menginput angka pertama misalnya 11 pada nomor rekening.
  2. Aplikasi akan memunculkan sebuah suggest yang menampilkan pilihan nomor rekening yang akan digunakan.
  3. Nomor rekening yang muncul mulai 111.01 sampai dengan 114.01 sesuai dengan data yang ada didalam database.
  4. User memilih salah satu yang nomor rekening.
  5. Hasil akhir dari aplikasi ini, nomor rekening dan nama rekening yang dipilih akan ditampilkan atau dipindahkan nilainya ke dalam form.
  6. selesai.

Sumber Data

Data yang ditampilkan dalam suggest diambil dari sebuah database.

auto_complete_DB

  • Database yang digunakan adalah : auto_complete_DB
  • Tabel yang digunakan adalah : tabel_master
  • Konfigurasi Database ada di file : autosuggest.php

Potongan script autosuggest.php

<?php
$db = new mysqli(‘localhost’, ‘root’ ,”, ‘auto_complete_DB’);
if(!$db) {
echo ‘Could not connect to the database.’;
} else {
if(isset($_POST[‘queryString’])) {
$queryString = $db->real_escape_string($_POST[‘queryString’]);

if(strlen($queryString) >0) {
$query = $db->query(“SELECT nama_rekening,kode_rekening FROM tabel_master WHERE kode_rekening LIKE ‘$queryString%'”);

if($query) {
echo ‘<ul>’;
while ($result = $query ->fetch_object()) {
echo ‘<li onClick=”fill(\”.addslashes($result->nama_rekening).’\’); fill2(\”.addslashes($result->kode_rekening).’\’);”>’.$result->kode_rekening.’&nbsp;&nbsp;’.$result->nama_rekening.'</li>‘;
}
echo ‘</ul>’;
} else {
echo ‘OOPS we had a problem :(‘;
}} else {
// do nothing
}} else {
echo ‘There should be no direct access to this script!’;
}}
?>

Dalam aplikasi suggest logikanya seperti pencarian dengan menggunakan kata kunci. jika anda ingin mengubah aplikasi ini sesuai dengan kebutuhan anda yang harus anda ubah adalah :

  • Ubah Query nya $query = $db->query(“SELECT nama_rekening,kode_rekening FROM tabel_master WHERE kode_rekening LIKE ‘$queryString%‘”);
  • Gunakan fungsi fill untuk mengkap nilai database dan menampilkan nilai field nya. fill(\”.addslashes($result->nama_rekening).’\’)
  • Jika ada field yang ingin ditampilkan lagi, buat fungsi fill ke dua yaitu fill2(\”.addslashes($result->kode_rekening) jangan lupa untuk memisahkan fungsi fill yang pertama dengan yang kedua memakan tanda koma (;).

Potongan script index.php (form inputan)

script yang harus ada dalam file index.php adalah script CSS yang tidak perlu di ubah :

<style>
#result {
height:20px;
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:40px;
margin: 26px 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>

script javascript yang perlu diubah :

http://jquery.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);
}

pada script javascript diatas terdapat dua fungsi fill yang pertama untuk menampilkan nama perkiraan, sedangkan yang kedua untuk menampilkan kode rekeningnya.

Script untuk memanggil fungsi

“fill2();” id=”kode” size=”15″/>

Download Script

http://www.4shared.com/file/44Hy-umj/suggest_autocomplete.html

Sekian tutorial dari saya semoga dapat bermanfaat untuk teman-teman dan anda semu 🙂

Depok, 07-12-2010

noname

Advertisements

12 Responses

  1. mas agus…aq da nyoba nih…

    uda aq cb pake dbaseq sndr…
    tp wkt dropdown nya kluar ko tulisannya g ada y, tulisan kode ma nama.

    tp ktika cursornya aq sorot k dropdown nya…itu ada isinya dan setelah aq klik dropdownnya…datanya muncul d text masing2..

    itu knp y mas ko tulisannya g muncul/g keliatan d dropdownya???

    mohon pencerahan..msh pemula ^^,
    tengkyu

    Like

  2. mas klo data yang udah dipilih di field autocompletenya biar bisa menginput data lagi ke database tapi beda tabel misalkan tabel input data rekening, gimana ya mas caranya?
    mohon pencerahannya mas..

    Like

  3. Mas. Kl fieldnya ditampilkan ke textarea gmn y?
    thanks

    Like

  4. mas, kalo list menu nya ga 1 gimana tuh skrip nya ? saya coba di 1 halaman input ada 3 autosuggest, jadi list menu nya 3, tapi pas saya ketik kode nya, auto fill nya itu ga muncul, kadang muncul tapi harus di ketik berulang-ulang..
    ini skripnya seperti ini :

    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’);
    }
    });
    $(‘#country’).addClass(‘load’);
    $.post(“autosuggest2.php”, {queryString: “”+inputString+””}, function(data){
    if(data.length >0) {
    $(‘#suggestions’).fadeIn();
    $(‘#suggestionsList’).html(data);
    $(‘#country’).removeClass(‘load’);
    }
    });
    $(‘#country’).addClass(‘load’);
    $.post(“autosuggest3.php”, {queryString: “”+inputString+””}, function(data){
    if(data.length >0) {
    $(‘#suggestions’).fadeIn();
    $(‘#suggestionsList’).html(data);
    $(‘#country’).removeClass(‘load’);
    }
    });
    }
    }

    function fill_cab(thisValue) {
    $(‘#id_cabang’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }

    function fill_nama_cab(thisValue) {
    $(‘#nama_cabang’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }
    function fill_dept(thisValue) {
    $(‘#id_dept’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }

    function fill_nama_dept(thisValue) {
    $(‘#nama_dept’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }

    function fill_hard(thisValue) {
    $(‘#id_hardware’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }

    function fill_nama_hard(thisValue) {
    $(‘#nama_hardware’).val(thisValue);
    setTimeout(“$(‘#suggestions’).fadeOut();”, 50);
    }

    #result {
    height:20px;
    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:40px;
    margin: 26px 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;
    }

    .load{
    background-image:url(loader.gif);
    background-position:right;
    background-repeat:no-repeat;
    }

    #suggest {
    position:relative;
    }

    New Audit
     

    ID Header
    :

     

    ID Cabang
    :

     

    ID Department
    :

     

    ID Hardware
    :

     

    Nama Header
    :

     

    Keterangan
    :

     

     

    <?php
    include "conn.php";

    //untuk input
    if(isset($_POST['id_header'])){
    $id_header=strtoupper($_POST['id_header']);
    $id_cabang=($_POST['id_cabang']);
    $id_dept=($_POST['id_dept']);
    $id_hardware=($_POST['id_hardware']);
    $nama_header=($_POST['nama_header']);
    $ket_header=($_POST['ket_header']);

    $query=mysql_query("insert into tbl_header(id_header,id_cabang,id_dept,id_hardware,nama_header,ket_header) values('$id_header','$id_cabang','$id_dept','$id_hardware','$nama_header','$ket_header')",$koneksi);

    if($query){
    echo "”;
    echo “Data Berhasil Disimpan”;
    }else{
    echo “Data Gagal Disimpan”;
    echo mysql_error();
    }
    }else{
    unset($_POST[‘id_header’]);
    }

    //untuk menampilkan
    $view=mysql_query(“select * from tbl_header order by id_header asc”);
    ?>

     

    ID Detail
    :

    ID Header
    :

    Select Header

    <option value="”>

    Nama Detail
    :

    Type
    :

    Spesifikasi
    :

    Product Key
    :

    IP Address
    :

     
     

    <?php
    //untuk input
    if(isset($_POST['id_detail'])){
    $id_detail=ucwords($_POST['id_detail']);
    $id_header=$_POST['id_header'];
    $nama_detail=$_POST['nama_detail'];
    $type=$_POST['type'];
    $spesifikasi=$_POST['spesifikasi'];
    $product_key=$_POST['product_key'];
    $ip_address=$_POST['ip_address'];

    $query=mysql_query("insert into tbl_detail(id_detail, id_header, nama_detail, type, spesifikasi, product_key, ip_address) values('$id_detail','$id_header','$nama_detail','$type','$spesifikasi','$product_key','$ip_address')",$koneksi);

    if($query){
    echo "”;
    echo “Data Berhasil Disimpan”;
    }else{
    echo “Data Gagal Disimpan”;
    echo mysql_error();
    }
    }else{
    unset($_POST[‘id_detail’]);
    }

    //untuk menampilkan
    $view=mysql_query(“select * from tbl_detail order by id_detail asc”);
    ?>

    tolong dikoreksi ya.. makasih

    Like

  5. uda di coba ni
    sangat berguna sekali mas
    😀

    Like

  6. kang, klo nginputnya pake scanner barcode gimna ya? manual juga tetep dpake (klo ga bisa dibarcode) jd ada 2 cara inputnya, pnerapan autocomplete buat program kasir. waturnuhun

    Like

  7. mau tanya… gimana kalo bukan negara… misalnya untuk mempermudah mencari nama barang. begitu dipilih barang yang di maksud.. di bawahnya akan ada informasi tentang spesifikasi, harga dsb. jadi ketika dia ketik in maka kemungkinan yang keluar adalan indomie, indosat, dan in lain nya…
    terimakasih…

    Like

  8. mas, mau tanya..
    klo autocomplete dipake buat array gimana ya?
    jadi kan add row gitu model tabelnya, nah itu gimana ya autocompletenya.
    terimakasih ^^

    Like

  9. kang cara buat auto complete dengan chaining dat agmn ya kang????

    Like

  10. maaf mau tanya
    jika saya punya 3 tabel antara lain :
    1. tabel mahasiswa isinya nim,nama,alamat,telp
    2. tabel biasiswa isinya id,namabeasiswa,jumlah
    3. tabel perpustakaan isinya idbuku,namabuku,peminjam
    saya ingin buat inputan dengan combo box seperti ini
    1. a. apabila saya pilih di combobox nim maka di bawahnya keluar nama,alamat,telp tetapi tidak bisa dirubah
    1.b. begitu juga halnya dengan biasiswa dan perpustakaan
    2.a. apabila ada yang terlambat kembalikan buku ada denda dan denda nominal 1000 kalau di tab langsung berubah 1.000,00 dan dibawahnya langsung tertulis data seribu rupiah
    mohon bantuannya.
    oh iya untuk pernyataan
    gaji dengan contoh
    input gaji 1000000 maka keluar 1.000.000,00 (apabila ti tab ke kolom bawah)
    angsuran pinjaman 20000 keluar 20.000,00 (apabila ti tab ke kolom bawah)
    sisa gaji 980000 keluar 980.000,00 (apabila ti tab ke kolom bawah)
    terima kasih

    ynnrny@yahoo.com

    Like

  11. hem kalau buat codeigniter piye gan ? jika data kosong bagaimana gan ?

    Like

  12. kalau data kosong OOPS we had a problem <– kalimat ini gak keluar gan ?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: