Part of the EllisLab Network
   
 
[ASK] Integrating CI and Jquery autocomplete plugin
Posted: 18 August 2008 05:28 PM   [ Ignore ]  
Summer Student
Total Posts:  6
Joined  05-07-2008

Hi all, I am trying to use the jquery autocomplete plugin and found a bit of stuck here. It seems that the plugin uses a $_GET parameter and therefore can’t work with the CI URL re-routing. It calls url like this:

http://localhost/SITE/controller/search_fullname?q=joko&limit=10&timestamp=1219101506002

I can’t get the variable q to work, but if I can rewrite the url to let’s say:

http://localhost/QMIT/plan/search_fullname/joko

then I can just adjust the controller to work accordingly, any hints?

TIA

Profile
 
 
Posted: 19 August 2008 02:28 AM   [ Ignore ]   [ # 1 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  127
Joined  08-06-2007

Hi,

You can edit the autocomplete plugin to make it use POST.
Just add

type: “post”,

to the configuration object sent inside $.ajax( statement, inside request() function.

Or you can enable $_GET this way. I have used it without any problem.

Cheers

Profile
 
 
Posted: 19 August 2008 05:48 AM   [ Ignore ]   [ # 2 ]  
Summer Student
Total Posts:  6
Joined  05-07-2008

Thank you so much gon for the reply. I use your solution and change it to post and now it works! Thanks again!

Profile
 
 
Posted: 07 September 2008 07:46 AM   [ Ignore ]   [ # 3 ]  
Summer Student
Total Posts:  11
Joined  09-07-2008

Hi! I started to work with CI yesterday.

Could you please write a little example of how did you realized this autocomplete feature in CI?

Here where iam stuck -    $(”#suggest1”).autocomplete(’/data_work/search_username/’,type:“post”);
});

So data_work is a cntroller. search_username - function. This function will search for usernames in DB and return it to autocomplete.

I dont know what to do next. I think its necessarily to do something with CI URI routing, but i dont know what exactly smile

Profile
 
 
Posted: 07 September 2008 10:31 AM   [ Ignore ]   [ # 4 ]  
Summer Student
Total Posts:  6
Joined  05-07-2008

I am using the jquery autocomplete and edit the jquery.autocomplete.js. I search for:

$.ajax({type: "get"...

and edit the “get” to “post”, and it works! I also encountered another problem with thickbox. So I used the “activating the get functionality” that was also recommended and it also works :D

Hope it helps

Profile
 
 
Posted: 07 September 2008 10:51 AM   [ Ignore ]   [ # 5 ]  
Summer Student
Total Posts:  11
Joined  09-07-2008

Yep, did it! Thanks alot!

Profile
 
 
Posted: 09 September 2008 10:26 PM   [ Ignore ]   [ # 6 ]  
Grad Student
Rank
Total Posts:  48
Joined  06-12-2008

Hi all,

I seem to have the same issue, but I can not find

$.ajax({type: "get"

anywhere in the jquery.autocomplete.js.

Please can someone help me in the right direction.

Thanks in advance,

Profile
 
 
Posted: 10 September 2008 01:08 AM   [ Ignore ]   [ # 7 ]  
Summer Student
Total Posts:  6
Joined  05-07-2008

search for

$.ajax({mode: "abort",port: "autocomplete" + input.name,

and add type: “post” like this

$.ajax({type: "post", mode: "abort",port: "autocomplete" + input.name,

Works for me

Profile
 
 
Posted: 10 September 2008 05:17 PM   [ Ignore ]   [ # 8 ]  
Grad Student
Rank
Total Posts:  48
Joined  06-12-2008

Guys,

Thank you so much for your help. You really make a difference in somebody’s live with the fast and educated replies. Thank you all again.

For the next person who comes across this problem ...

Inside jquery.autocomplete.js

Change

$.ajax({mode: "abort",
    
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);
                
}
}
);

to this ...

$.ajax({type: "post",
        
mode: "abort",
    
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);
                
}
}
);

Then in your controller, change ....

$q = strtolower($_GET["q"]);

to

$q = strtolower($_POST["q"]);
Profile
 
 
Posted: 14 June 2009 04:42 PM   [ Ignore ]   [ # 9 ]  
Lab Assistant
RankRank
Total Posts:  102
Joined  01-30-2008

Adding type: “post”, in jquery.autocomplete.js throws an error:

missing } in compound statement

Anyone know why?  This seemed to work before and my JS skills aren’t good enough to track it down.

Thanks

Profile
 
 
Posted: 14 June 2009 08:24 PM   [ Ignore ]   [ # 10 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  549
Joined  03-21-2009

You’ll probably need to post your code Mikey.

Profile
 
 
Posted: 14 June 2009 09:51 PM   [ Ignore ]   [ # 11 ]  
Lab Assistant
RankRank
Total Posts:  102
Joined  01-30-2008

Copied from above ... I basically just added in that type:“post” but it won’t pick up the post variable ... stays as get… not sure why it won’t change but I checked on jquery forums and they said the same thing ... just add that param in and it should just work:

$.ajax({type: "post",
        
mode: "abort",
    
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);
                
}
}
);

From my view:

$(document).ready(function(){
    
$("#client_name").autocomplete("<?php echo base_url() ?>ajax/customers", {
        scroll
: true,
        
scrollHeight: 300,
        
autoFill: true,
        
cacheLength: 1,
        
min: 1,
        
max: 20,
        
matchContains: false,
        
onItemSelect:selectItem, selectOnly:1, elementID:'cust_id'
    
});
});
Profile
 
 
Posted: 15 June 2009 06:26 AM   [ Ignore ]   [ # 12 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  549
Joined  03-21-2009

I’m not sure.  You said you were getting an error.  What gave the error?  What file was it in?  Did it give you a line number?

Profile
 
 
Posted: 15 June 2009 10:26 AM   [ Ignore ]   [ # 13 ]  
Lab Assistant
RankRank
Total Posts:  102
Joined  01-30-2008

I got it worked out.  I switched to the segment based autocomplete described in this thread:

Segment Based Jquery Autocomplete

I initially had some troubles with that on my local server but once I committed to my dev server everything seemed to work fine so I’m pretty sure that is the same issue I was having here.  Not sure what the deal was though b/c I’m running a vm image of my dev server.  Thanks anyways though.

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 721, on January 06, 2010 09:38 AM
Total Registered Members: 114993 Total Logged-in Users: 65
Total Topics: 122434 Total Anonymous Users: 3
Total Replies: 647290 Total Guests: 489
Total Posts: 769724    
Members ( View Memberlist )