jQuery in CakePHP

Hi,

It would be very helpful if you show us the controller code and especially the autoComplete method of the ajax controller.

thanks

could you please give an example of a view? As whenever I click on a result it puts the HTML (including the <li> and <a> tag) inside the input.

Hi,

First of all, Great Helper.

I have a Question:
The autocomplete function can pass like an option the value of a diferent textbox than the textbox generated by the function. If the answer is yes, how I do that?

Thanks....

thanks for answer !!!.

I wanna check it later

Hi gabrielr:

Lastly when I answered I made a little mistake and now I'm attaching correct example :)

<?php echo $form->create('User', array('url' => '/ajax/view')); ?>
<?php echo $ajax->autoComplete('Post.subject', '/ajax/autoc', array('extraParams' => '{extra: function() { var out = {}; out["title"] = $(\'[name="zzz"]\').val(); return out; }}'))?>
<?php echo $form->end('View Post')?>


in controller you can use extra params by $this->params['url']['extra']

How am i suppose to make the item works as a link instead of inserting text result to textbox?

thanks Kvas i've done that . it works great !

Mr_sangrin, maybe you have other version of autocomlete library?

Kevin Lambert, I think you shoul use:

$this->params['url']['key_name']

Very good, I love you so much!!!

Hi Samantha!

I think that you can use: 'formatResult' option...

Maybe something like this will help:
'formatResult' => 'return value.split("|")[1];'

Ok, thanks again Kvas, your hint put me on the right track. What worked for me was this :

'formatResult' => 'return data[1];'

I hope this helps someone else who might be wanting to do something similar to myself. :)

Nevermind my last post, im stupid:)

Hector, you can only use $ajax->autocomplete, but this method can get parameters as $form->input...

I've found the problem ... my view/layout/ajax.ctp was empty ...

with :
<?php echo $content_for_layout; ?>

it's ok !

Hey man, and validation?

hey man i have, example full views and controllers, by guide?

Hi obelksyavhe,

The view source is in the example code block. Controller that is responsible for autocomplete ajax response is in the 2nd comment.

What do you mean with 'invoke the. js'?

BTW this method works nearly like in oryginal Ajax Helper in CakePHP...

Hi Ay Dot,

Autocomplete is not best tool for presenting lots of data, so there is no way to paginate.

You can try using better search methods in your controller to present better results at top...

Hi vm8,
You should try code from 6th comment (from 2010-04-23 17:11:49). I explained there how to use extraParams in javascript.

Hi Jerre,

You can try with $this->layout = 'ajax' in your controller.

Hi Jerre,
In my apps it's working fine.
Maybe you are inserting code in wrong action?

Hi Jerre,
Your code looks fine. Maybe you have modified ajax.ctp?

with this code :
<?php foreach($articles as $a): ?>
<?php echo $a['Article']['nom']; ?>
<?php endforeach; ?>

it does not split the results into separate lines and when i click one article name in the list, just copies all the lines as one in the input field.
Any idea ?

I have the result as :
Bonbons propolis eucalyptus 70gPropolis spray bio 30mlPropex 24mlGommes propolis orange<!-- 0.1s -->
instead of :
Bonbons propolis eucalyptus 70g
Propolis spray bio 30ml
Propex 24ml
Gommes propolis orange
<!-- 0.1s -->

adding "\n" after every article leads to stopping the ajax request. I can't see any reason for it but without the "\n" every new letter you type, the script sends a request. With the "\n", there is only one request (output in firebug).
What do you mean by "add enter" ?

Form :
echo $ajax->autoComplete('Article.nom', '/articles/autocomplete', array(
'label' => '',
'size' => 34,
'value' => 'rechercher',
'onclick' => 'erase(this)'
));

Controller :
function autocomplete() {
$this->set('articles', $this->Article->find('all', array(
'conditions' => array(
'Article.nom LIKE' => '%'.$this->params['url']['q'].'%'
),
'fields' => array('Article.nom'),
'limit' => $this->params['url']['limit']
)));
$this->layout = 'ajax';
}

view -> autocomplete.ctp :
<?php foreach($articles as $a): ?>
<?php echo $a['Article']['nom']; ?>
<?php endforeach; ?>

layout-> ajax.ctp :
<?php echo $content_for_layout; ?>

ajax output (without "\n") for 'prop':
Bonbons propolis eucalyptus 70gPropolis spray bio 30mlPropex 24mlGommes propolis orange<!-- 0.0988s -->
This should be :
Bonbons propolis eucalyptus 70g
Propolis spray bio 30ml
Propex 24ml
Gommes propolis orange
<!-- 0.0988s -->

As soon as I add the "\n" (like this : echo $a['Article']['nom']."\n";), the function only sends one request (for the first letter). So it collects only the first 10 results. Why does the addition of "\n" stop the process ?

This is the problem : when I type a second letter with "\n" in the autocomplete view, there is no second request so it does not find all the results.
Without this "\n" there is a second (and third and ...) request and all the matching items are found but they are on a single line.
No error is reported in firebug in either case.

Thanks for this great library! I am trying to setup autocomplete for a foreign key. I have a CONTACTS table that has a COMPANY_ID field that references the COMPANIES table's ID field. I want to set it up so that instead of a drop down it is a text-field that the user starts to type in the company name. If it exists in the COMPANIES table it will show as autocomplete; however, if it doesn't it will add it to the COMPANIES table as a new record.

Thanks in advance!

Hi William,
Great that you found a solution of this problem. And thanks for info for other users.

Hi HaiNguyen,
Maybe you can read errors from your firebug?

Hi HaiNguyen,
maybe problem is with fact that you include scripts in your view.

BTW, why you're using prototype with this helper?

In my controller:


CanbosController, I have a function (use for autocomplete):

function autoComplete() {

$this->set('canbos', $this->Canbo->query('select distinct Canbo.hotencb from canbos as Canbo
where
Canbo.hotencb LIKE\''. $this->data['Canbo']['tim'].'%'.'\''
)
);
$this->layout = 'ajax';

}


In view/canbos, I created auto_complete.ctp:


<?php
echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');
echo $javascript->link('effects');
echo $javascript->link('controls');
?>

<ul>
<?php foreach($canbos as $post): ?>
<li><?php echo $post['Canbo']['hotencb']; ?></li>
<?php endforeach; ?>
</ul>


I use autocomplete in view/canbos/index:


<div class="formsearch" style="float:right;background-color:#e8edff;">
<!--form id="TimSearchchForm" method="post" action="./tims/searchch"-->
<?php echo $form->create('Canbo', array('action'=>'search')); ?>
<table border="0" cellpadding="0">
<tr>
<td colspan="3" align="center"><font color="red">Nhập họ tên, (hoặc) mã số cán bộ, địa chỉ, email</font></td>
</tr>
<tr>
<td><b>Nội dung&nbsp;</b></td>

<td><?php echo $ajax->autoComplete('Canbo.tim', '/canbos/autoComplete')?></td>
<td><input type="submit" name="Submit" value="Tìm"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" align="left"><input type="checkbox" name="data[Canbo][chinhxac]" value="1" id="TimChinhxac">tìm chính xác </td>
</tr>
</table>
</form>
</div>



I tried on IE, it works, FF doesn't.

You should delete scripts from auto_complete.ctp at first and use only jquery.

If this doesn't help start debuging with firebug.

Hi kvas,
Now, I want to create a search engine which likes GOOGLE. When I type some letter into search field, the results will display below immediately (same to autocomplete). How can I do?

which one? Can you tell me where it is?

hi,
can you solve my issue which are i am facing when using autocomplete. issue is that when type single word then autocomplete populate result comes in single "li" not diffrent "li", but when i type second word after first it show correct.
my controller code is that
$this->set('locations', $this->Location->find('all', array(
'conditions' => array(
'Location.name LIKE' => '%'.$this->params['url']['q'].'%'
),
'fields' => array('name')
)));
$this->layout = 'ajax';
and autocomplete.ctp code is that
<?php foreach($locations as $location): ?>
<?php echo $location['Location']['name']; ?>
<?php endforeach; ?>
here is the code for calling
echo $ajax->autoComplete('Location.CustLocationId', '/locations/autoComplete');
please help me

I'm having this issue where I have difficulties formatting the layout of the output:
Now I just get an almost invisible list of items (no background color for the dropdown, the items in it are white).
When I put HTML code in the auto_complete.ctp it's just printed as text.
When I add <font color="black"><?php echo $content_for_layout; ?></font> nothing changes.

Any idea how I can adjust this?

ok stupid of me, that did the trick!
Thanks!

Sorry, tool change for post.

When a delete the var $hasAndBelongsToMany = array(..) in my Post Model, works it, but I am not convinced.

Hi,

Thanks for the helper, it works for me like a charm!
But i have a question. How i have to do for fill multiple's fields with this code?

I tried do it, but i'm doing samething wrong.
I write here my code, maybe you can help me...

controller:

function articulosAutoComplete(){
$this->set('articulos', $this->Articulo->find('all', array(
'conditions' => array(
'Articulo.articulo LIKE' => '%'.$this->params['url']['q'].'%'),'limit' => $this->params['url']['limit'])));
$this->layout = 'ajax';
}


auto_complete.ctp:

<ul>
<?php foreach($articulos as $articulo): ?>
<li onclick="EntradaDescArticulo.value = '<?php echo @$articulo['Articulo']['desc_articulo'];?>'">
<?php echo $articulo['Articulo']['articulo'];?></li>
<?php endforeach; ?>
</ul>

in my view:

echo $ajax->autocomplete('articulo', '/articulos/articulosAutoComplete', array( 'class' => 'inputclient', 'label' => 'Articulo'));

echo $form->input('desc_articulo', array('class' => 'inputstore', 'label' => 'Descripción'));


Just for a field works great, but for two not.
Please help me!

Hi kvas!
thanks for answering! but just I'm trying your Autocomplet code but filling multiple's fields.
If samebody know the answer or have a solution, please help me! tanks

hi kvas

Thank you for sharing this helper lots of people find this very helpful.

I got and error on firebug

" $("#UserUsername").autocomplete is not a function
[Break On This Error] $('#UserUsername').autocomplete('/autocop/users/autoComplete', {}); "

and no result on browser.

My developement envi
cakephp1.3.7
FF

table names:users
fields:id, username

users/users_controller.php
<?php
class UsersController extends AppController {


var $helpers = array ('Html','Form','Javascript', 'Ajax');
var $name = 'Users';
var $layout = 'simple';
var $components = array('DebugKit.Toolbar');

function index() {
$this->set('users', $this->User->find('all'));
}


function add() {
if (!empty($this->data)) {
if ($this->User->save($this->data)) {
$this->Session->setFlash('Your post has been saved.');

}
}
}

function autoComplete() {

$this->set('users', $this->User->find('all', array(
'conditions' => array(
'User.username LIKE' => '%'.$this->params['url']['q'].'%'
),
'limit' => $this->params['url']['limit'],
'fields' => array('username')
)));
$this->layout = 'ajax';
}

}
?>

users.add.ctp
<?php echo $form->create('User', array('url' => '/users/view')); ?>
<?php echo $ajax->autoComplete('User.username', '/users/autoComplete')?>
<?php echo $form->end('View Post')?>

users/auto_complete.ctp
<?php foreach($users as $a): ?>
<?php echo $a['User']['username']; ?>
<?php endforeach; ?>



I followed your instruction on how to use this helper.maybe a miss something why i got this error.
thanks in advance for your help.

@kvas

thanks i forgot the autocomplete js on layout.

i have another problem on the list it add an extra value
example:
the result on firebug

den
dedo
deb
<!-- 0.6628s --><table class="cake-sql-log" id="cakeSqlLog_13008079754d88c1279e7704_06756596" summary="Cake SQL Log" cellspacing="0" border = "0">
<caption>(default) 2 queries took 5 ms</caption>
<thead>
<tr><th>Nr</th><th>Query</th><th>Error</th><th>Affected</th><th>Num. rows</th><th>Took (ms)</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>SELECT `User`.`id`, `User`.`password`</td>
</tr>
</table>

the table add on the list. how can i remove that table on the list.

@kvas


how to turn off? i'm using 1.2.3 bacause i'm modify an old application.


the helper works great using 1.3.7


thanks in advance.

Hello I've a problem. I cannot create an autocomplete.

katalogs_controller:
function autoComplete() {
$this->set('katalogs', $this->Katalog->find('all', array(
'conditions' => array(
'Katalog.Haupteintrag LIKE' => '%'.$this->params['Katalog']['Haupteintrag'].'%'
),
'fields' => array('Haupteintrag'),
'group' => 'Haupteintrag'
)));
$this->layout = 'ajax';
}

add.ctp:
<td class="view_td">Hauptsortierung:</td>
<td><?php echo $form->input('HauptSort', array('label' => false));?></td>

can you help me?
thanks

Hi basti,

Try:
function autoComplete() {
$this->set('katalogs', $this->Katalog->find('all', array(
'conditions' => array(
'Katalog.Haupteintrag LIKE' => '%'.$this->params['url']['q'].'%'
),
'fields' => array('Haupteintrag'),
'group' => 'Haupteintrag'
)));
$this->layout = 'ajax';
}

Hi dan,
1) Method __getHtmlOptions removes params that are used in ajax request. Type decides that request is asynchronous/synchronous.

2) I've never tried something like this :)

3) I think that you can pass parameter 'multiple' => true and it'll work, but I haven't checked this.

Hi!

Really cool.

Any plans to port this to cakephp 1.3 using the Js helper?

Regards.

Hi Thomas,
I think that your solution is best for this helper.
Thanks for sharing

Note : In the same page i also use a DatePicker and the DatePicker is working.

kvas, thanks for you answer.

Here is the full HTML generated by Helper
<div class="input text"><label for="EspeceFree">Espece Free</label><input name="data[Espece][espece_free]" type="text" id="EspeceFree" autocomplete="off" maxlength="200" /></div>
<script type="text/javascript">
//<![CDATA[
$('#EspeceFree').autocomplete('/crapalbonsai/especes/autocomplete', {});
//]]>
</script>


I've tried something else.
The autoComplete works when I don't include the jquery.ui.js script... I think that the problem is the jquery.ui.js script... but i need it for the datePicker.

Here is the datePicker generated script
<div class="input text required"><label for="BonsaiDateObtention">Date d'obtention</label><input name="data[Bonsai][date_obtention]" type="text" id="BonsaiDateObtention" /></div><script type="text/javascript">
//<![CDATA[
var BonsaiDateObtention = $('#BonsaiDateObtention').datepicker({maxDate:'+1Y', firstDay:1, dateFormat:'yy-mm-dd', dayNamesMin:["dim","lun","mar","mer","jeu","ven","sam"], monthNames:["Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","D&eacute;cembre"], showAnim:'blind', showOn:'both', buttonImage:'/crapalbonsai/img/date-icon.png', autoSize:true});
//]]>
</script>

Hello, kvas.

First, I wanna say thanks for the helper. Its very helpful.

But, I need to ask you one thing. It's about how could I use my own <ul> on the view? Is it possible or not?

What I wanna do is, I'd like to set the attribut of the li with my own datas, on multiple autocomplete purpose.

Thank you in advance

I also have this in a header...


<?php echo $html->css('application') ?>
<?php echo $html->css('photonotes') ?>
<?php echo $html->css('lightbox') ?>
<?php echo $html->css('jquery-ui-1.8.4.custom') ?>

<?php echo $javascript->link('application') ?>
<?php echo $javascript->link('swfobject') ?>
<?php echo $javascript->link('photonotes') ?>

<?php echo $javascript->link('ddlevelsmenu') ?>
<?php echo $javascript->link('highslide') ?>
<?php echo $javascript->link('highslide-html') ?>

<?php echo $html->css('haccordion') ?>
<?php echo $javascript->link('haccordion') ?>

above all...
maybe this is keeping from work...

?php echo $form->create('User', array('url' => '/ajax/view')); ?>
<?php echo $ajax->autoComplete('Post.subject', '/ajax/autoComplete')?>
<?php echo $form->end('View Post')?>

while using these, i am getting the error message like. call the member function and undefined varible ajax....



plz help me.. wat to do .....
i waiting for the reply...

I can get my autocomplete to successfully search through my cities and display the correct city, but when I click my selection, nothing happens and the text box text won't change. What do I need to do in order for the selection to be made after clicking the desired result?


echo $this->Ajax->autoComplete('City.name', '/cities/autoComplete');

I got it to correctly insert the text for the city, but I can't seem to pass the id associated with the city... How can you pass the id?

hi kvas '
I got
$ is not a function
$('#ArticleTitle').autocomplete('/cakeplate/ajax/autoComplete', {});

thank

Simplemente.. Gracias..

Hi Ashal,
Maybe problem is in css styles. Check in firebug if data goes into div with class="ac_results"...

Hi Molotsi,
My helper doesn't need javascrict code but it generates js (jquery) code and put it into your response.

Hi Molotsi,
File is placed in zip with my helper in section "download".

First of all, great work!
But i remain with a struggle mention above.
<?php if(!empty($movies)){
foreach($movies as $movie){ ?>
<?php echo ($movie->title).'\n'; ?>
<?php }}else{
echo 'Not found'.'\n';
} ?>
This is in my autocomplete.ctp however the '\n' doesn't do a newline instead i get one big element including \n.
For example: Toy Story 3\n Toy Story 2\n.....

You know where my error is because I've been staring without luck. (also adding <br/> doesn't help since then it includes the <br/> into the result)

Hi I'm using the new CakePHP 2.x
but when using autoComplete I cant be able to initiate any event.
My Code is
<?php echo $this->Ajax->autoComplete('User.username', '/message/search_user',array('autocomplete'=>'on', 'id' => 'username', 'empty' => 'Write the Username','type' => 'text', 'class' => 'input', 'div' => false, 'label' => false ));?>

but when typing inside it shows nothing.
I've included all the JS files and checked. Help me out please.

Hi kvas!!
what a great helpers here and especially great support for those to ask (thx to kvas..)

i want to ask about sending options to autocomplete..

how to make function when i click one of the list??

i've tried :
$ajax->autoComplete('Transactiondetail0Product',
'/products/getProductListAjax',
array("label" => false,
"extraParams" =>
'select : function( event, ui ) {
$( "#TransactionProductId" ).val(ui.item.Product.id);
$( "#Transactiondetail0ProductId" ).val( ui.item.Product.name );
$( "#Transactiondetail0Amount" ).val( 1 );
$( "#Transactiondetail0Price" ).html( ui.item.Product.price );

return false;
})'));

Hi Moo,
there is no callback on selecting item.

This autocomplete plugin cant receive JSON.
You can look at it's options here.

If you need to make not standard autocomplete I would suggest using http://jqueryui.com/demos/autocomplete/

Hi,

I have successfully implemented your autocomplete in cakephp 1.3. (THX kvas!) But I have a problem to send the id of the selected option to the controller. Only the text is sended, not the id.
I get successfully the answer of the controller: (output from firebug)
Option 344|3
Option 334|30
Option 234|31
I get the string 'Option ...' in the textbox (like I wanted), but I must send the ID to the controller.
I have tried:
echo $ajax->autoComplete('Option.name', '/giis/search2', array('formatResult' => 'return data[1];')); (cfr. Msg 20)==>Works: but the id is now in the textfield and the string must be in the textfield, the id must be in 'background'(=>hidden field???).
Can anybody help me?
Thx!

Hi Don,
My helper doesn't support features like this. You should use jqeuryui autocomplete plugin and make it by your self.

@giuseppe - when you type chars in input it will retrive rows that contains these chars. If you want only rows that starts with your sequence you should delete first '%' in your query.

hi Awais,
Did the problem appear on displaying form or response?

Hi Awais,
In cakephp2.x you should find params in: $this->request['url']