Selasa, 26 Februari 2013

Untuk postingan yang ini saya tidak mau terlalu banyak basa basi, sebab mungkin diantara pembaca pada malas untuk melihat dan mencermati renungan saya. Ya sebab saya sendiri jika lihat postingan orang lain yang terlalu basa basi jadi males sendiri :D ok deh langsung saja

buat database seperti berikut


CREATE TABLE IF NOT EXISTS `tbl_bahasa` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `bahasa` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) 
INSERT INTO `tbl_bahasa` (`id`, `bahasa`) VALUES
(1, 'ActionScript'),
(2, 'AppleScript'),
(3, 'Asp'),
(4, 'BASIC'),
(5, 'C'),
(6, 'C++'),
(7, 'Clojure'),
(8, 'COBOL'),
(9, 'ColdFusion'),
(10, 'Erlang'),
(11, 'Fortran'),
(12, 'Groovy'),
(13, 'Haskell'),
(14, 'Java'),
(15, 'JavaScipt'),
(16, 'Lisp'),
(17, 'Perl'),
(18, 'PHP'),
(19, 'Python'),
(20, 'Ruby'),
(21, 'Scala'),
(22, 'Scheme');


kemudian buka database.php, atur sesuai dengan nama database yang anda buat.
Karena ini hanya contoh, jadi tidak perlu repot-repot membuat controller baru, jadi pake saja welcome.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {    

    public function __construct()
    {
        parent::__construct();
        $this->load->model('autocomplete_model');
        $this->load->database();
        $this->load->helper('url');
    }
    public function index()
    {
        $this->load->view('welcome_message');
    }
    public function suggestions()
    {
        $bahasa = $this->input->post('bahasa',TRUE);
        $rows = $this->autocomplete_model->getData($bahasa);
        $json_array = array();
        foreach ($rows as $row)
            $json_array[]=$row->bahasa;
        echo json_encode($json_array);
    }
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */


buat juga model dengan nama autocomplete_model.php

<?php

class Autocomplete_Model extends CI_Model
{
    public function __construct()
    {
        parent::__construct();
    }
    public function getData($bahasa)
    {
        $this->db->select('bahasa');
        $this->db->like('bahasa', $bahasa);
           $query = $this->db->get('tbl_bahasa');
        return $query->result();
    }
}

buka view welcome_message.php kemudian tambahkan

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function () {
        $(function () {
            $( "#autocomplete" ).autocomplete({
                source: function(request, response) {
                    $.ajax({ 
                        url: "<?php echo site_url('welcome/suggestions'); ?>",
                        data: { bahasa: $("#autocomplete").val()},
                        dataType: "json",
                        type: "POST",
                        success: function(data){
                            response(data);
                        }    
                    });
                },
            });
        });
    });
    // ]]>
    </script>
</head>
<body>
<div id="container">
    <h1>jQurey AutoComplete with remote json</h1>
    <div id="body">
        Text: <input type="text" id="autocomplete" />
    </div>
    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>

dan berikut adalah penampakannya


Download
Password: didanurwanda.blogspot.com

10 komentar:

  1. kalau mau nampilkan id nya di textfield lain gmn bang?

    BalasHapus
  2. Jika ingin membuat multi autocomplete dengan Json tersebut bagaimana

    BalasHapus
  3. gan kok autocomplete nya gak mau muncul ya??
    salah dimna ya gan padahal gak ada eror..

    BalasHapus
  4. gan kok autocomplete nya gak mau muncul ya??
    salah dimna ya gan padahal gak ada eror..

    BalasHapus
  5. link downloadnya rusak gan...please reupload.

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.