Autocomplete with jQuery and CodeIgniter PHP MVC

Question

I'm trying to build an autocomplete using jQuery plugin autocomplete from this site.

Now I managed to achieve autocomplete using local results pre-loaded into website as a part of document ready function, its quite easy doing it locally.

Here is with what I struggle with, pulling results from PHP file. Here is how I tried:

$("#post_tags").autocomplete("http://localhost/tags/filter", {
    width: 260,
    selectFirst: false,
    highlight: false,
    multiple: true,
    multipleSeparator: " ",
    scroll: true,
    formatItem: function (row, position, totalReturned, searchTerm){
      return row[0];
    },
    formatResult: function(row, position, totalReturned){
      return row[0].replace(/(<.+?>)/gi, '');
    }
 }).result(function(event, data, formatted){
    $("<li>").html( !data ? "No match!" : "Selected: " + formatted)
     .appendTo("#result");
 });

When I manually go to http://localhost/tags/filter/p I get results php,asp because they contain letter p .

How can I make this work with autocomplete? I mean it's quite easy using native PHP (see this file). I'm only passing something to the search file like this search?q=p and I get back the results. Since I'm using CodeIgniter the things are a bit different and I don't retrieve any results using jQuery code above.

Answer 1

In your jquery.autocomplete.js file, at around line 360 (as of the latest version), add one line to make the section look like this:

$.ajax({ 
    type: "post", // This is the new line
    // try to leverage ajaxQueue plugin to abort previous requests
    mode: "abort",
    // limit abortion to this input
    port: "autocomplete" + input.name,

(If you are using a minified version of the autocomplete plugin, just do a search for .ajax and insert the line as appropriate).

This change causes the autocomplete script will now send form data by POST, rather then GET. Accessing this from within codeigniter can be done as follows:

public function filter()
{
    $filter_by = $this->input->post('q');
}

And from this you can generate your list as required. I'm not sure if there is a nicer way to do this (one which doesn't require you to edit the source code), but it works for me.