Short look why, please: JQuery UI autocomplete from database

[eluser]Jan_1[/eluser]
Sorry, I don't get it. Could somebody please have a look and give me a hint? Thank you!!!

I have tryed a lot of variations and had a good look in the dokumentation, but nothing has worked. It's a fresh Codeigniter and "?" is permitted as uri_chars in config/config.

Code:

<s.c.r.i.p.t>
$(function()
    {   var availableTags = [
   "ActionScript",
   "AppleScript",
   "C++",
   "Clojure",
  ];
  $( "#tags" ).autocomplete({
   source: availableTags
  });
    });  
</s.c.r.i.p.t>
&lt;input name="group" id="tags"/&gt;

works fine!

but not this one:
View:

Code:

<s.c.r.i.p.t>
$(function()
    {   $( "#groups" ).autocomplete({
source: "index.php/accounting/booking_set_ajax_groups/",
            method: "POST",
minLength: 0,
select: function( event, ui )
                {
  log( ui.item ?
   "Selected: " + ui.item.value + " aka " + ui.item.id :
   "Nothing selected, input was " + this.value );
  }
  });
    });  
</s.c.r.i.p.t>
&lt;input name="group" id="groups"/&gt;

Controller:

Code:

function ajax_groups()
    {
        $keyword = $this->input->post('term');
        $this->db->SELECT('group')->LIKE('group', $keyword)->distinct();
        $query  = $this->db->get('database_groups');
        if($query->num_rows() >0)
        {   $i = 0;
            foreach($query->result() as $row)
            {
            $data[] = array('id' => $i, 'label' => 'group', 'value'=> $row->group);
            $i++;
            }
        }
        echo json_encode($data);        
    }

If I ask the Browser for my Controller, I get these groups names like

[{"id":0,"label":"group","value":"group1"},{"id":1,"label":"group","value":"group2"},{"id":2,"label":"group","value":"group3"}]

When I do type a 'space' I get an erroer-message in console:

GET http://url.tld/index.php/controller/ajax_groups?term=Pr+ 404 (Not Found)
f.support.ajax.f.ajaxTransport.sendjquery.min.js:4
f.extend.ajaxjquery.min.js:4
a.widget._initSource.a.isArray.options.source.string.sourcejquery-ui.min.js:12
a.widget._searchjquery-ui.min.js:12
a.widget.searchjquery-ui.min.js:12
(anonymous function)

[eluser]pickupman[/eluser]
jQuery UI doesn't support POST by default and "method:" is not an option for the autocomplete widget. Previously before GET was allowed in CI, you could use a callback for source. Just change your controller to use:

Code:

$keyword = $this->input->get('term');

If you would rather use post you will need to create the callback to look like:

Code:

source: function(req, add){
            
            var fields = $("#groups").val(); //Get input
                $.ajax({
                    url: '<?php echo site_url('accounting/booking_set_ajax_groups');?>',
                    dataType: 'json',
                    type: 'POST',
                    data: fields,
                    success: function(data){
                        add(data);
                    }
                });
}

[eluser]Shiju S S[/eluser]
I have the script as

Code:

$(function()
    {   $( "#tags" ).autocomplete({
  source: function(req, add){
            
            var fields = $("#tags").val(); //Get input
                $.ajax({
                    url: '<?php echo base_url('frontpage/autocomplete');?>',
                    dataType: 'json',
                    type: 'POST',
                    data: fields,
                    success: function(data){
                        add(data);
                    }
                });},
minLength: 0,
  select: function( event, ui )
                {
   log( ui.item ?
      "Selected: " + ui.item.value + " aka " + ui.item.id :
      "Nothing selected, input was " + this.value );
  }
  });
    });

The input is:

Code:

<div class="ui-widget">
            <label for="tags">Tags: </label>
            &lt;input id="tags" name="name"&gt;
        </div>

I have the controller frontpage with autocomplete mehod

Code:

public function autocomplete()
    {  

  $searchterm  = $this->input->post('fields');
     $query ="SELECT DISTINCT category FROM listeditems WHERE MATCH (category,subcategory,title,details,address) AGAINST ('$searchterm') > 0";
  $result = $this->sales_exe_details_db->get_results($query);
        
  if($result)
  { $i=0;
   foreach($result as $row):
  
   $data[] = array('id' => $i, 'label' => 'group', 'value'=> $row->category);
    $i++;  
   endforeach;    
  }
  echo json_encode($data);
    }

Nothing happens! Please help.

[eluser]Shiju S S[/eluser]
When I am loading some data manually to the $data array the items are displayed in the search box. When an item displayed is selected I get an error "log not defined".

[eluser]CroNiX[/eluser]
Well, there is a huge difference between the data in your manual way (all in a single array of ONLY names) and your database call where you are returning an array with the 'id', 'label' and 'value' for each one.

As far as your "log not defined" error...do you have a function named "log()"? If using firebug, did you mean to put "console.log()" instead?

[eluser]pickupman[/eluser]
As CroNiX mentioned the log() function should be as he had shown. This will echo the selection to Console in Firebug, or Developer Tools in Chrome. You actually need to use those values (ui object) to set the value of your input in the select method.