CodeIgniter Forums
Short look why, please: JQuery UI autocomplete from database - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Short look why, please: JQuery UI autocomplete from database (/thread-48776.html)



Short look why, please: JQuery UI autocomplete from database - El Forum - 01-28-2012

[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)




Short look why, please: JQuery UI autocomplete from database - El Forum - 01-28-2012

[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: '&lt;?php echo site_url('accounting/booking_set_ajax_groups');?&gt;',
                    dataType: 'json',
                    type: 'POST',
                    data: fields,
                    success: function(data){
                        add(data);
                    }
                });
}



Short look why, please: JQuery UI autocomplete from database - El Forum - 02-22-2012

[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: '&lt;?php echo base_url('frontpage/autocomplete');?&gt;',
                    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.


Short look why, please: JQuery UI autocomplete from database - El Forum - 02-22-2012

[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".


Short look why, please: JQuery UI autocomplete from database - El Forum - 02-22-2012

[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?


Short look why, please: JQuery UI autocomplete from database - El Forum - 02-22-2012

[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.