jQuery UI Autocomplete with CI ??

[eluser]pickupman[/eluser]
Your controller

Code:

function index(){
    
     $search = $this->input->post('term');
        
     $data['response'] = 'false';
  
     $result = $this->searchcity->citysearch($search); //Search DB
     if($result != FALSE)
     {
        $data['response'] = 'true'; //Set response
        $data['message'] = array(); //Create array
        foreach($result as $row)
        {
            $data['message'][] = array('label'=> $row->id, 'value'=> $row->city); //Add a row to array
        }
     }
    
     if(IS_AJAX)
     {
         echo json_encode($data); //echo json string if ajax request
     }else{
         $this->load->view('search',$data); //Load html view of search results
     }
  }

[eluser]goldensona[/eluser]
hi thanks a lot to you pickupman. i used you controller file , now no error shows but autocomplete didnt populate i dont know why ? is anything we have to changed in the autocomplete.js file?

we used post for getting the autocomplete response , i cant see the difference .

this is whole code after i changed the controller file

changed the config.php

Code:

//Global define for AJAX Requests
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

js part search.php

Code:

< cript t  ype="text/javascript" src="&lt;?php echo base_url()."jquery-ui-1.8.4.custom/development-bundle/jquery-1.4.2.js"?&gt;">[removed]
< cript t  ype="text/javascript" src="&lt;?php echo base_url()."jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.core.js"?&gt;">[removed]
  < cript t  ype="text/javascript" src="&lt;?php echo base_url()."jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.widget.js"?&gt;">[removed]
  < cript t  ype="text/javascript" src="&lt;?php echo base_url()."jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.position.js"?&gt;">[removed]
< cript type="text/javascript" src="&lt;?php echo base_url()."jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.autocomplete.js"?&gt;">[removed]


    
[removed]
//Javascript
$("input[name='singlecity']").autocomplete({
        source: function(req, add){
                $.ajax({
                    url: '&lt;?php echo site_url('searchs');?&gt;',
                    dataType: 'json',
                    type: 'POST',
                    data: req,
                    success: function(data){
                        if(data.response =='true'){
                           add(data.message);
                        }
                    }
                });
        },
        minLength: 3,
        select: function(event, ui){
            $(this).end().val(ui.item.value);
        }
     });
[removed]
&lt;/head&gt;

&lt;body&gt;
&lt;input type="text" name="singlecity"  size="48"&gt;

&lt;/body&gt;

my model file searchcity.php

Code:

<?php
class Searchcity extends Model {

function Searchcity() {
// load the parent constructor
parent::Model();
}


function citysearch($search)
{
   if(empty($part_number)) return FALSE; //nothing to search

   $this->db->like('city', $search);

   $query = $this->db->get('tablenames');
  
  
  
   if($query->num_rows() > 0)

       return $query->result();

  return FALSE;
}  

}
?>

this is my searchs.php controller file

Code:

<?php
class Searchs extends Controller{
  
function Searchs(){
// load Controller constructor
parent::Controller();
// load the model we will be using
$this->load->model('searchcity');
// load the database and connect to MySQL
$this->load->database();
// load the needed helpers
$this->load->helper('url');
}

function index(){
    
     $search = $this->input->get('term');
        
     $data['response'] = 'false';
  
     $result = $this->searchcity->citysearch($search); //Search DB
     if($result != FALSE)
     {
        $data['response'] = 'true'; //Set response
        $data['message'] = array(); //Create array
        foreach($result as $row)
        {
          
            $data['message'][] = array('label'=> $row->id, 'value'=> $row->city); //Add a row to array
        }
     }
    
     if(IS_AJAX)
     {
         echo json_encode($data); //echo json string if ajax request
     }else{
         $this->load->view('search',$data); //Load html view of search results
     }
  }  

}  
?>

what i have to change in my code


thanks

sona

[eluser]pickupman[/eluser]
Got a link to PM me, I would be interested in seeing this in Firebug.

[eluser]josebyte[/eluser]
Hi all,
First of all sorry for my bad english level.
I´m new on this and I tried to use your scripts for more than 6hours and nothing. I don´t know where is the problem because I have no errors...
I think the controller is ok, buy I dont know jquery... maybe the problem is here...
If anyone can help me this is my code:

Function in controller:

Code:

public function search(){
        
        $search = $this->input->post('term');
        
        $data['response'] = 'false';
        
        $this->db->select('*');
        $this->db->from('geonames');
        $this->db->like('name', $search);
        $locations = $this->db->get()->result();

        
        if(count($locations) > 0){
            $data['message'] = array();
            
            foreach($locations as $location){
               $data['message'][] = array(  'label' => $location->name . ', ' . $location->name . ' ' . $location->name,
                                            'item'  => $location->name,
                                            'value' => $location->name );
            }
            
            $data['response'] = 'true';
        }
        echo json_encode($data);      
}

JSs and rest of the code:

Code:

<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
    
<s-ript type="text/javascript" src="js/jquery-1.4.2.min.js">[removed]
<s-ript type="text/javascript" src="jsui/jquery.ui.core.js">[removed]
<s-ript type="text/javascript" src="jsui/jquery.ui.widget.js">[removed]
<s-ript type="text/javascript" src="jsui/jquery.ui.autocomplete.js">[removed]

<s-ript type="text/javascript">
$("input[name='city']").autocomplete({
        source: function(req, add){
                $.ajax({
                    url: '&lt;?php echo site_url('auth/search');?&gt;',
                    dataType: 'json',
                    type: 'POST',
                    data: req,
                    success: function(data){
                        if(data.response =='true'){
                           add(data.message);
                        }
                    }
                });
        },
        minLength: 3,
        select: function(event, ui){
            $(this).end().val(ui.item.value);
        }
     });
</s-ript>
    


    <div class="ui-widget">
    &lt;input type="text" id="city" class="city" /&gt;
    </div>

I´m using jquery v1.4.2 and jui v1.8.5. What I´m doing bad?

[eluser]pickupman[/eluser]
Your jquery selection is a input named "city", however, you don't have that in your html element. Try

Code:

<div class="ui-widget">
    &lt;input type="text" name="city" id="city" class="city" /&gt;
    </div>

[eluser]josebyte[/eluser]
Thanks, but still dont work and I dont know why.

[eluser]pickupman[/eluser]
A little more detail will be helpful. Are using jquery and jquery ui downloaded from jquery.com? Are using firebug in Firefox? If so (which you should be with any ajax), what are you posting to the server and what is the response from the server?

[eluser]goldensona[/eluser]
Hi josebyte,pickupman used above code but error message 404 shows to me , dont know y ?

[eluser]josebyte[/eluser]
The code works, thanks!!
I haven´t any idea of jquery but resolved the problem using function() before autocomplete:

Code:

[removed]
$(function() {
    $( "#city" ).autocomplete({
            source: function(req, add){
                    $.ajax({
                        url: 'http://www.URL.com/index.php/ajax/search'+'/'+$('#provincia').val()
,
                        dataType: 'json',
                        type: 'POST',
                        data: req,
                        success: function(data){
                            if(data.response =='true'){
                               add(data.message);
                            }
                        }
                    });
            },
            minLength: 3,
            select: function(event, ui){
                $(this).end().val(ui.item.value);
            }
    });
});    
[removed]

[eluser]Unknown[/eluser]
y8-y3-y8 Reply to Game vui: Thanks you very much...
y8 games-y8-Pog