/ / Auto complete search using mysql ajax codeigniter

Auto complete search using mysql ajax codeigniter

Edit
I would like to show all of you about how to create auto search data from database using ajax codeigniter

1. create database 
--
-- Table structure for table `country`
--

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `iso` char(2) NOT NULL DEFAULT '',
  `printable_name` varchar(80) NOT NULL DEFAULT '',
  `iso3` char(3) DEFAULT NULL,
  `numcode` smallint(6) DEFAULT NULL,
  PRIMARY KEY (`iso`),
  KEY `id` (`id`),
  KEY `id_2` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=241 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `iso`, `printable_name`, `iso3`, `numcode`) VALUES
(165, 'PA', 'Panama', 'PAN', 591),
(166, 'PG', 'Papua New Guinea', 'PNG', 598),
(167, 'PY', 'Paraguay', 'PRY', 600),
(168, 'PE', 'Peru', 'PER', 604),
(169, 'PH', 'Philippines', 'PHL', 608),
(240, 'KH', 'Cambodia', 'C', 1);
2. View (show.php)in view folder 
<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>  
    
            .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() {  
            $("#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);  
                                console.log(data);
                            }  
                        },  
                    });  
                },  
                    
            });  
        });  
        </script>  
           
    </head>  
    <body>  
        Country :  
        <?php  
            echo form_input('printable_name','','id="id"');  
        ?>  
        <ul>  
            <div class="well" id="result"></div>  
        </ul>  
    </body>  
</html> 
3. Controller (autocomplete.php) in controller folder
<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');  
  
class Autocomplete extends CI_Controller {   
   
 public function __construct()  {  
        parent:: __construct();  
  $this->load->model("MAutocomplete");  
  $this->load->helper("url");  
  $this->load->helper('form');  
    }  
       
    public function index(){  
        $this->load->view('show');  
    }  
       
    public function lookup(){  
        // process posted form data  
        $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->id,  
                                        'value' => $row->printable_name,  
                                        ''  
                                     );  //Add a row to array  
            }  
        }  
        if('IS_AJAX')  
        {  
            echo json_encode($data); //echo json string if ajax request  
        }  
        else  
        {  
            $this->load->view('show',$data); //Load html view of search results  
        }  
    }  
} 
4. Model (mautocomplete.php) in model folder
 <?php 
class MAutocomplete extends CI_Model{ 
    function lookup($keyword){ 
        $this->db->select('*')->from('country'); 
        $this->db->like('printable_name',$keyword,'after'); 
        $this->db->or_like('iso',$keyword,'after'); 
        $query = $this->db->get();     
        return $query->result(); 
    } 
} 
 *NOTE don't forget connect database and load library database
Share on Google Plus

About Unknown

    Blogger Comment
    Facebook Comment

5 comments:

Subscribe to: Post Comments ( Atom )