Saturday, July 23, 2011

Jquery Auto Complete

Auto Complete adalah suatu fungsi untuk mencari data dengan mengetik sebuah keyword pada suatu text(html) tersebut. Jquery UI mempunyai fasilitas tersebut , maka dari hal itu file - file yang harus dibutuhkan adalah sbb :
1. jquery.min.js

2. jquery-ui.min.js

misal kita mempunyai text html sbb :
input type="text" name="barang" class="id" size="30" />
div id="result">/div>

text tersebut mempunyai class dengan nama id dan ada div id='result' untuk menampilkan hasil dr autocomplete tersebut.

nah setelah itu kita buat file javascript auto completenya sbb :


$(document).ready( function() {
            $(".id").autocomplete({
                minLength: 2,
                source:
                    function(req, add){
                    $.ajax({
                        url: "http://localhost/admin/barang/", ----> untuk mengambil data barang
                        dataType: 'json',
                        type: 'POST',
                        data: req,
                        success:
                            function(data){
                            if(data.response =="true"){
                                add(data.message);
                            }
                        },
                    });
                },
                select:
                    function(event, ui) {
                    $("#result").append(
                    " input type='text' id='harga_barang_free' name='harga_barang_free' value='" + ui.item.value1 + "' size='15' /"
                );
                },
            });
        });

No comments:

Post a Comment