Codeigniter - Autocomplete with Jquery (small article)

[eluser]J. Brenne[/eluser]
Just change the URL and add your parameters.

Code:

$(”#airport_name”).autocomplete(‘airport/json_name/A/B/C/D/E’, {

Dont forget that the URL have to exist

[eluser]Unknown[/eluser]
can you give me your original code (zip download) because i can't open your blog.
thanks...

[eluser]vinoth15[/eluser]
hi,

i have the same problem with ie 7.

$("#resttxts").autocomplete('user_list/get_RestaurantNames', {
multiple: false,
parse: function(data) {
return $.map(eval(data), function(row) {
return {
data: row,
value: row.name,
result: row.name
}
});
},
formatItem: function(item) {
return format(item);
}
});

i get an error it doesn't like row.name

any help would be appriecated.

[eluser]ardinotow[/eluser]
Can't get it work on IE 8 too

[eluser]Unknown[/eluser]
It´s all Ok

but how can i passing parameters to the controller from a input text?

I try whith this:

$("#direccion").autocomplete(
"<?php echo base_url();?>index.php/ajax/direcciones/"+$("#cp").val()+"/", {
width: 260,
selectFirst: false
});


But $("#cp").val() not pass !!!

What´s wrong? Thanks for all

[eluser]ganjasensation00[/eluser]
[quote author="J. Brenne" date="1232908485"]Hey,
i just wrote a small article about creating autocomplete with codeiginter and jquery.
It's based on the Jquery Autocomplete Plugin of Bassistance.de. I searched a while for a working autocomplete and only found some old or bad tutorials or expliantions. So I testet around and found a way to realize it with reading from databse. I used MySQL for that.
Thats why I wrote this article.


If you want to see the original and with a complete ZIP download - can be found at:
http://allover.worldattack.de/2009/01/25...th-jquery/

Lets start.
You need for the the view:

Code:

$(function() {
    function format(mail) {
        return mail.name + " (" + mail.to + ")";
    }

    $("#name").autocomplete('autocomplete/get_Names', {
        multiple: false,
        parse: function(data) {
            return $.map(eval(data), function(row) {
                return {
                    data: row,
                    value: row.name,
                    result: row.name
                }
            });
        },
        formatItem: function(item) {
            return format(item);
        }
    });
});

The controller:

Code:

class Autocomplete extends Controller {

    function Autocomplete()
    {
        parent::Controller();    

        // load models
        $this->load->model('autocomplete_model');
    }

    function index()
    {
        $this->load->view('autocomplete', array());
    }

    function get_Names()
    {
        $q = strtolower($_POST["q"]);
        if (!$q) return;

        // form dropdown and myql get countries
        $airports = $this->autocomplete_model->getData();

        // go foreach
        foreach($airports->result() as $airport)
        {
            $items[$airport->callname] = $airport->country;
        }

        echo "[";
        foreach ($items as $key=>$value) {
            if (strpos(strtolower($key), $q) !== false) {
                echo "{ name: \"$key\", to: \"$value\" }, ";
            }
        }
        echo "]";
    }
}

Now the model/autocomplete_model.php

Code:

class Autocomplete_model extends Model
{
    function Autocomplete_model()
    {
        parent::Model();
    }
    function getData()
    {
        $this->db->select('*')->from('airports');
        $query = $this->db->get();
        return $query;
    }
}

jquery.autocomplete.js
The last thing is, you have to change the jquery.autocomplete.js into POST.
So just — add type: “post”, –. That’s all!

Code:

$.ajax({
// try to leverage ajaxQueue plugin to abort previous requests
type: "post", // add this only! must be line ~340
mode: "abort",
// limit abortion to this input
port: "autocomplete" + input.name,
dataType: options.dataType,
url: options.url,
data: $.extend({
    q: lastWord(term),
    limit: options.max
}, extraParams),
success: function(data) {
    var parsed = options.parse && options.parse(data) || parse(data);
    cache.add(term, parsed);
    success(term, parsed);
}
});

Thats all hope it was useful and sorry for my bad english. If you have any question - ask.[/quote]

I cannot find the $.ajax in the jquery.ui.autocomplete.js. What should I do? What version of jquery ui did you used?

[eluser]adityamenon[/eluser]
J. Brenne - THANKS!

[eluser]coldKingdom[/eluser]
[quote author="ganjasensation00" date="1284466780"]
I cannot find the $.ajax in the jquery.ui.autocomplete.js. What should I do? What version of jquery ui did you used?[/quote]

$.ajax is in the main jQuery release, not part of the UI.

Just make a scriptlink to http://ajax.googleapis.com/ajax/libs/jqu...ery.min.js in the header and you should be fine.

Edit: Just realised that I answered a year old post but someone else may need some assistance with this so I keep it