jQuery AJAX autocomplete with CodeIgniter

[eluser]naren_nag[/eluser]
Hi,

I've modified an existing jQuery autocomplete/ajax plugin to work with codeigniter. I've posted the source code along with usage details on my blog over here.

I'm also attaching jqeury.autocomplete.js with this post.

UPDATE:

I've modified the plugin even more. Now it does the following -

1. I can make any input item an autocomplete box simply by writing

$("#id").autocomplete("index.php/rpc/function",{parameters});

2. Once the data is returned, I define a javascript function to be called in the parameters
onSelectItem: funtion_name

3. I can also define an element id to pass to this function
elementID: id_name

4. In the function itself, one value is always passed - an li, and if I've defined an elementID then that will be passed as well.

5. This has made it incredibly easy for me to run multiple autocompletes on locations in the same form (multiple addresses), get an id back as well and assign it to multiple hidden fields.

Update js file attached.

cheers,

Nag

[eluser]Bui Duc Long[/eluser]
thank you very much for contributed code :d

[eluser]ndovado.com[/eluser]
This is gold for us!

but...we have this kind of trouble: if I call this

$("#fromLocation").autocomplete(
"/index.php/newTrip/retiveCity",
{
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
selectOnly:1
});

codeigniter fire this get request
http://localhost:8888/index.php/newTrip/retiveCity/ that is not correct couse miss the project directory

and if i run this
$("#fromLocation").autocomplete(
"projectdir/index.php/newTrip/retiveCity",
{
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
selectOnly:1
});
codeigniter fire this get request:
http://localhost:8888/projectdir/index.p...etiveCity/ !!!!!

I do know why. And you?
Can you help us??

[eluser]naren_nag[/eluser]
@ndovado.com

Ok, first off: the second URL is completely wrong. Refer to the CI documentation on how to organise your application and the folder structure that CI follows.

In a nutshell:

index.php/controller_name/function_name/value1/value2...

I'm assuming you have a controller called newTrip that has a function called retiveCity, is that correct?

If that is the case, then you shouldn't have a problem. I've got an example put up on my blog that shows the CI controller code as well. It hasn't been updated to include recent updates, but is fairly simple and goes over the basics: www.narendranag.com

[eluser]ndovado.com[/eluser]
@nag

thank you for the fast reply!

As you can see on my previous post: I have been tried with the correct version:

$(”#fromLocation”).autocomplete(
“/index.php/newTrip/retiveCity”,
{
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
selectOnly:1
});

I have a controller called nreTrip and a function retriveCity.

But when it does not work cause whene I digit something into #fromLocation the ajax call try to access the wrong url http://localhost:8888/index.php/newTrip/retiveCity/

[eluser]naren_nag[/eluser]
[quote author="ndovado.com" date="1239242438"]@nag

thank you for the fast reply!

As you can see on my previous post: I have been tried with the correct version:

$(”#fromLocation”).autocomplete(
“/index.php/newTrip/retiveCity”,
{
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
selectOnly:1
});

I have a controller called nreTrip and a function retriveCity.

But when it does not work cause whene I digit something into #fromLocation the ajax call try to access the wrong url http://localhost:8888/index.php/newTrip/retiveCity/[/quote]

Dude, if you want access a controller called nreTrip ... why are you putting newTrip as the controller in the autocomplete function call?

[eluser]ndovado.com[/eluser]
Shit!

it's just an error

any other suggestions? what abput the httaccess?

[eluser]yrachmanu[/eluser]
Hi narren,

I've problem with your script, could you help me ??

Here my script,below ( I've just copied your js script onto ownauto.js & load model with reguler SQL not by active record like your example did ),that's all

But, this script implement there nothing happen with the autocomplete, please help me...

Thanks' for your reply

/**************************************
my controller
***************************************/

class autocomplete extends controller
{
function autocomplete(){
parent::Controller();
}
function segment($name)
{

if (isset($name) && strlen($name) > 2)
{
$this->load->model('regionmodel');
$query=$this->regionmodel->getRegion($name);
foreach($query->result() as $row)
echo $row->descrption."\n";
}
}
}


/***************************************
my View
**************************************/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
[removed][removed]
[removed][removed]
[removed][removed]
</head>
<body>
<body>
<input type="hidden" name="segment_id" value="" id="segment_id">
<label for="segment">Segment</label>
&lt;input type="text" name="segment" value="" id="segment"&gt;
&lt;/body&gt;

&lt;/body&gt;
&lt;/html&gt;


/**************************
ownauto.js
**************************/
$(document).ready(function() {
$("#segment").autocomplete("/index.php/autocomplete/segment",
{ minChars:3, matchSubset:1, matchContains:1, cacheLength:10,
onItemSelectelectItem, selectOnly:1, elementID:'segment_id' }
);
});

function selectItem(li, elementID) {
$("#"+elementID).val(0);
var setVal = (li.extra) ? li.extra[0] : 0;
$("#"+elementID).val(setVal);
}

[eluser]neversummer[/eluser]
@nag

Thanks for your work on this plugin, I think it's going to help me lot. I was making a first attempt to getting it working and am having a bit of trouble. I've put the plugin js into autocomplete.js and am including that and jquery.js. I have a controller and function that returns an unordered list based on the 3rd uri segment (controller/function/parameter). I have verified that it works (returns the list). I've pasted the code for the test page below. Would you expect this to work? At this time the page does nothing, no error, nothing.

Code:

<html>
<head>
  [removed][removed]
  [removed][removed]
  
  [removed]
  $(function() {
        $("#segment").autocomplete('http://mysite/controller/function',
            {
                minChars:2,
                matchSubset:1,
                matchContains:1,
                cacheLength:10
            }
         );
    });
  
  [removed]
</head>
<body>
    <label for="segment">Segment</label>
    &lt;input type="text" name="segment" value="" id="segment" /&gt;

&lt;/body&gt;
&lt;/html&gt;

Thanks for any insight you might have.

[eluser]naren_nag[/eluser]
@neversummer

Try adding index.php in the url: http://mysite/index.php/controller/function

@yrachmanu

Are you spelling description wrong in this line in your segment function:
echo $row->descrption.”\n”;


Guys, apologies for the delayed response. I was on vacation, and didn't have access to email/internet. (It was a REAL vacation)