Tidak seperti plugin autocomplete kebanyakan, Simple Javascript Autocomplete ditulis dengan bahasa javascript model lama alias Native Javascript. Mengapa tidak menggunakan Framework Javascript seperti jQuery, Mootools, Prototype dll? karena pemikiran saya waktu itu ingin membuat suatu library yang tidak bergantung pada library lain maka muncul ide ini ini untuk dibuat.

Cara penerapannya pun cukup mudah kok, tidak rumit. Karena ini library sederhana kalian tidak akan menemui fitur - fitur tambahan pada library ini kecuali hanya penerapannya pada kode program kalian. Karena library ini masih tahap development kalian harus sedikit menyesuaikan CSS dengan design website kalian, berikut cara menggunakan library ini

1. Buat 1 file bernama index.html

isi seperti berikut :

<html>
<head>
    <style>
        #suggestSearch{position: relative;}
        .suggestList{width:150px;z-index:1;border:1px solid #000000;
            overflow:auto; height:100px; background-color:#FFFFFF;
        }
        .suggestData{padding:2px;cursor:pointer;}
        .suggestData:hover{background-color:#000;}
        .suggestData:nth-of-type(odd){background-color:#FFFFFF;}
        .suggestData:nth-of-type(even){background-color:#F5F5F5;}
        .mouseOver{background-color: #999!important;}
    </style>
    <script language="JavaScript" type="text/javascript"  src="myAutoComplete.min.js"></script> // input juga nama file librarynya       
</head>
<body>
    Simple AJAX Autocomplete:
    <form id="suggestSearch">
        <label>Nama : </label>
        <input type="text" id="nama" alt="Search Criteria" />
        <div id="layer1"></div> // untuk menampung data ajax
    </form>
</body>
</html>

2. Sisipkan script autocomplete sebelum Tag </body>

<script type="text/javascript">      
    var option = {
         textID  : "nama" // nama id text field
        ,targetID: "layer1" // nama id untuk ditampilkan ajax
        ,url     : "search_data.php" // file ajax yang akan dipanggil
        ,queryStr: "search" // nama query string
        ,minLength : 2 // minimal karakter akan menampilkan data
    };
    isoweb.autocomplete(option, function(item){
        alert(item['label']); // menampilkan data ajax
    });   
</script>

3. Kalian buat 1 file bernama search_data.php isi seperit berikut

<?php
if (isset($_GET['search']) && !empty($_GET['search'])) {
    $arr = array();
    $arr['result'] = array(
         array("id" => 12345, "label" => "langga","xx" => "sss")
        ,array("id" => 12346, "label" => "anggi","xx" => "sss")
        ,array("id" => 12347, "label" => "debora","xx" => "sss")
        ,array("id" => 12348, "label" => "michell","xx" => "sss")
    );
   
    echo json_encode($arr);
}
?>

Mudah bukan cara penerapannya Smile, saya belum coba bila library ini digabungkan dengan framework lain kalian bisa mencobanya dan report saya bila terjadi error.

Callback data dari ajax (item) disesuaikan dengan yang ada pada hasil result Json. penerapan json diatas tidak saya sertakan dengan koneksi database saya anggap kalian pintar bila masih bingung untuk ajax kalian dapat ubek - ubek artikel di website ini.

DEMO | DOWNLOAD