Memasang Autocomplete jquery ui di codeigniter

Selamat malam para pecinta coding di seluruh jagad raya, siapkan secangkir kopi untuk menemani membaca artikel topcer ini gan, biar tidak ngantuk,,wkwkwk

Untuk kali ini kami dari team archives code akan meluncurkan artikel terupdate dan terbaru mengenai cara Memasang Autocomplete jquery ui di codeigniter yang mudah mudahan agan dapat memahami kalimat sederhana ini dengan tepat dan benar benar mengerti maksudnya

Bagi anda pengembang web tentu tidak asing lagi dengan jquery. Dan salah satu plugin jquery yang paling terkenal adalah jquery ui. kali ini saya akan membagikan tutorial tentang menggunakan autocomplete di codeigniter.

Ok langsung saja kita ke TKP

pertama dan yang paling utama siapkan dulu peralatan tempur nya
1. codeigniter jangan lupa di install ya kalo beluj punya download dulu http://ellislab.com/codeigniter
2. jquery sekalian pasang ya he he eh kalo belum punya download http://jquery.com/
3. jquery ui pemasangan nya sama dengan memasang jquery. kalo belum punya silakan download http://jqueryui.com/download/

ok kalo sudah lengkap semua. mari kita bertempur.

1. Buat controllernya seperti di bawah ini

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Autocomplete extends Controller {
    function __construct() {
        parent::Controller();
        $this->load->model('MAutocomplete');
    }

    function index(){
        $this->load->view('autocomplete/show');
    }

    function lookup(){
        // process posted form data (the requested items like province)
        $keyword = $this->input->post('term');
        $data['response'] = 'false'; //Set default response
        $query = $this->MAutocomplete->lookup($keyword); //Search DB
        if( ! empty($query) )
        {
            $data['response'] = 'true'; //Set response
            $data['message'] = array(); //Create array
            foreach( $query as $row )
            {
                $data['message'][] = array(
                                        'id'=>$row->propinsi_id,
                                        'value' => $row->propinsi,
                                        ''
                                     ); //Add a row to array
            }
        }
        if('IS_AJAX')
        {
            echo json_encode($data); //echo json string if ajax request

        }
        else
        {
            $this->load->view('autocomplete/index',$data); //Load html view of search results
        }
    }

}

function inix digunakan untuk menampilkan form nya dan function lookup digunakan unutk mengambil data dari database yang akan kita tampilkan dengan autocomplete.

2. Buat model nya

<?php
class MAutocomplete extends Model{
    function __construct(){
        parent::Model();
    }

    function lookup($keyword){
        $this->db->select('*')->from('propinsi');
        $this->db->like('propinsi',$keyword,'after');
        $query = $this->db->get();

        return $query->result();
    }
}

dari kode model diatas jika di terjemahkan ke bahasa sql adalan "select * from propinsi where propinsi like 'keyword%';
dimana keyword disini adalah karakter yang kita inputkan di textfiled form.
jadi ketika kita menginputkan karakter di textfiled form makan akan langsung di cari di database tepatnya di tabel propinsi. jika ketemu akan langsung ditampilkan dengan bantuan ajax request.

ok terakhir kita buat unutk tampilan / view nya

3. view

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Codeigniter Autocomplete</title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/   css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
        <meta charset="UTF-8">

        <style>
            /* Autocomplete
            ----------------------------------*/
            .ui-autocomplete { position: absolute; cursor: default; }
            .ui-autocomplete-loading { background: white url('http://jquery-ui.googlecode.com/svn/tags/1.8.2/themes/flick/images/ui-anim_basic_16x16.gif') right center no-repeat; }*/
            /* workarounds */
            * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
            /* Menu
            ----------------------------------*/
            .ui-menu {
                list-style:none;
                padding: 2px;
                margin: 0;
                display:block;
            }
            .ui-menu .ui-menu {
                margin-top: -3px;
            }
            .ui-menu .ui-menu-item {
                margin:0;
                padding: 0;
                zoom: 1;
                float: left;
                clear: left;
                width: 100%;
                font-size:80%;
            }
            .ui-menu .ui-menu-item a {
                text-decoration:none;
                display:block;
                padding:.2em .4em;
                line-height:1.5;
                zoom:1;
            }
            .ui-menu .ui-menu-item a.ui-state-hover,
            .ui-menu .ui-menu-item a.ui-state-active {
                font-weight: normal;
                margin: -1px;
            }
        </style>

        <script type="text/javascript">
        $(this).ready( function() {
            $("#provinsi_id").autocomplete({
                minLength: 1,
                source:
                function(req, add){
                    $.ajax({
                        url: "<?php echo base_url(); ?>index.php/autocomplete/lookup",
                        dataType: 'json',
                        type: 'POST',
                        data: req,
                        success:
                        function(data){
                            if(data.response =="true"){
                                add(data.message);
                            }
                        },
                    });
                },
            select:
                function(event, ui) {
                    $("#result").append(
                        "<li>"+ ui.item.value + "</li>"
                    );
                },
            });
        });
        </script>

    </head>
    <body>
        Nama Provinsi :
        <?php
            echo form_input('provinsi','','id="provinsi_id"');
        ?>
        <ul>
            <div id="result"></div>
        </ul>
    </body>
</html>

ok sudah cukup pertempuran nya sekarang silakan uji coba ya semoga berhasil.....

Mungkin demikian dulu gan artikel mengenai Memasang Autocomplete jquery ui di codeigniter yang dapat kami sajikan, silahkan disantab sesuai dengan selera,,wkwkwk

Apabila ada masukan silahkan masuk pada diskusi dibawah ini gan, akan kami tampung dulu gan ( entah kapan bisa membalasnya )..xixixi

Brapo brapo brapo yezzz..!!!