Home / Pemprograman / Simple Javascript Autocomplete [Bagian 2]

Simple Javascript Autocomplete [Bagian 2]

Artikel ini merupakan kelanjutan dari Artikel sebelumnya Simple javascript Autocomplete dimana terdapat beberapa bagian yang masih manual akan sedikit diperbaiki untuk menghemat penulisan kode. Apakah banyak perbedaan dari sisi penulisan code? tidak ini hanya perbaikan kecil saja, hanya menhilangkan bagian layer dimana pada script sebelumnya dibuat manual untuk memunculkan hail response dari JSON sedangkan pada autocomplete yang terbaru dibuat otomatis jadi kalian tidak perlu menambahkan div layer padahalaman HTML.

berikut cara penggunaan autocomplete yang terbaru

<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–> // di comment karena langsung dibuat melalui javascript sesuai dengan nama targetID
    </form>
</body>
</html>

untuk penerapannya javascript seberi dibawah ini

<script type=”text/javascript”>
        var option = {
             textID  : “nama” // sesuaikan nama text autocomplete
            ,targetID: “layer1”  // nama target untuk memunculkan autocomplete
            ,url     : “searchSuggest.php” // halaman ambil data
            ,queryStr: “search” // nama query string yang dikirim via ajax
            ,minLength : 2 // minimal pengetikan pada text autocomplete
            ,posY   : 22 // posisi batas atas layer autocomplete (hilangkan untuk default)
            ,posX   : 50 // posisi kiri layer autocomplete (hilangkan untuk default)
        };
        isoweb.autocomplete(option, function(item){
            alert(item[‘id’]); // hasil callback
        });   
</script>
 

OK segitu dulu perbaikannya, semoga bermanfaat, silahkan unduh script dibawah

DOWNLOAD

 

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

CodeIgniter 3.0 Final Release

CodeIgniter dikalangan web development nama framework ini sudah tidak asing walau ada beberapa web developer …

Tinggalkan Balasan

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