Autocompletion frustrations

[eluser]nlweb[/eluser]
This is my first attempt at trying to implement an autocomplete feature with jquery in codeigniter. Its been smooth before, but I am running out of ideas.

I have searched (almost) every thread on here, as well as other sites and this is the closest I can get it to working, but it still doesnt work right.

Using a popular tutorial online, I am using the following code:
Controller:

Code:

public function lookup()
{

$this->load->model('customer_model');
     $term = $this->input->post('term',TRUE);
  
     $rows = $this->customer_model->GetAutocomplete(array('keyword' => $term));
  
     $keywords = array();
     foreach ($rows as $row)
          array_push($keywords, $row->keyword);
  
     echo json_encode($keywords);

}

Model:

Code:

function GetAutocomplete($options = array())
     {
         $this->db->select('company_name');
         $this->db->like('company_name', $options['keyword'], 'after');
         $query = $this->db->get('customers');
         return $query->result();
     }

View:

Code:

< script type="text/javascript" >
$(function() {
    $( "#tags" ).autocomplete({
        source: function(req, add){
            
            var term = $("#tags").val(); //Get input
                $.ajax({
                    url: '<?php echo site_url('customers/lookup');?>',
                    dataType: 'json',
                    type: 'POST',
                    data: term,
                    success: function(data){
                        add(data);
                    }
                });
},  
        minLength: 0,
        delay:0

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

This does not work. At all. However, If i put an array into "customers/lookup" and return that as json depending on $this->input->post('term',TRUE), it correctly displays the data. I am thinking its something in the model, but I have rewritten it about 5 times and its still not working.

I usually dont give up on something like this, but it has me beat. Any advice? I had to add the SOURCE function to get even results from the array I used. Without that in there, even the array wont work.

[eluser]Aken[/eluser]
Ajax data request should be an object - you're just passing the value. I'd be surprised if $this->input->post('term') had anything in it at all.

You want something like this:

Code:

data: { term: term },

[eluser]nlweb[/eluser]
[quote author="Aken" date="1345088761"]Ajax data request should be an object - you're just passing the value. I'd be surprised if $this->input->post('term') had anything in it at all.

You want something like this:

Code:

data: { term: term },

[/quote]

Why would i need to pass an object? never had to do that before with autocompletes, setting the variable and pulling the val() has always worked, why would codeigniter break that?

[eluser]Aken[/eluser]
The data you send through an $.ajax() request needs to be a query string, or a Javascript array or object. Look it up yourself. All you're doing is passing a standard string - the value of your tags field. Therefore, you are not creating a POST request for "term", and it won't exist when it gets to your lookup() controller.

[eluser]nlweb[/eluser]
[quote author="Aken" date="1345090291"]The data you send through an $.ajax() request needs to be a query string, or a Javascript array or object. Look it up yourself. All you're doing is passing a standard string - the value of your tags field. Therefore, you are not creating a POST request for "term", and it won't exist when it gets to your lookup() controller.[/quote]

According to that page it can be an object OR a string. I tried setting term to an object as well like you recommended, still no results, but I did some digging with FireBug, and anytime something is typed into the input box, it sends back a Server 500 error, "The action you have requested is not allowed."

EDIT: The parameters for the 500 error shows the correct variable "terms" with the correct text, so lookup IS getting the text in the input box.

[eluser]Aken[/eluser]
Well the 500 error is quite obviously your main problem, so that should help.

If you pass it a string, it must be in query string format for it to be used properly. I've tested this for multiple versions of jQuery going back to 1.3.0. If you pass it a single word value, it will act as the key of a key => value pair, IF it passes through (which it doesn't if it's through POST, at least according to my tests - only GET).

This is all for $.ajax() requests by themselves. Maybe autocomplete somehow changes the request, I don't know (based on your code, I don't see how it can). The only way I can see this "working" for you in the past is if the autocompletes used their own wrapper for the ajax request, and created the keys on their own. But the way you're doing it is not standard, so it's my suggestion that you use an object like I exampled. Nothing I can see - documentation or practical testing - creates a "terms" key in the request.

[eluser]Mirge[/eluser]
Aken is correct, your data, if you want it to be a string, should be in the format of a query string. IE: "term="+term, though it's more conventional in my experience to use data: { term: term } (an object).

But I digress. This should help: http://www.jamipietila.fi/codeigniter-an...th-jquery/

[eluser]nlweb[/eluser]
[quote author="Mirge" date="1345093802"]Aken is correct, your data, if you want it to be a string, should be in the format of a query string. IE: "term="+term, though it's more conventional in my experience to use data: { term: term } (an object).

But I digress. This should help: http://www.jamipietila.fi/codeigniter-an...th-jquery/[/quote]

THAT is the tutorial I based this off from. If you look at the tutorial, it doesnt pass it as an object, it pulls the val() and sends it just like I did.

I tried using {term: term} as the data and I still get nothing. I have been at this for 2 days now.

[eluser]Aken[/eluser]
Um, it clearly passes an object. Here is their exact line, compared with your original:

Code:

// Theirs:
data: { term: $("#autocomplete").val()},

// Yours
data: term,

// Which translates to:
data: $('#tags').val(),

Clearly a difference.

And regarding the problem, you said yourself that your request was returning a 500 server error. Well that means something is wrong with the request, most likely the URL you are trying to retrieve from (or the code inside that URL). Verify in your JS output that the URL is correct (try copying and pasting it into your browser). Try creating a test form that sends post data to that URL and see what happens.