Geek Answers Handbook

Cakephp search form autocomplete

Hey I'm a newbie and I'm looking for a way to find an autocomplete window like google does.

I searched, and the best perspective I found is http://www.pengoworks.com/workshop/jquery/autocomplete.htm that I found on the forum. The guy who suggested says he uses it with http://code.google.com/p/searchable-behaviour-for-cakephp/ , which is dead because I managed to install the search version the last time I tried to figure out the stigma .

The thing is, I haven’t used a lot of javascript before, and I'm a little confused about what exactly I should do. The documentation with autocomplete codes does not contain details that I can understand.

If we assume that I can correctly set the behavior for the search, can any person explain to me how I will do auto-completion?

It says just use:

$("selector").autocomplete(url [, options]);

eg:

 $("#input_box").autocomplete("autocomplete_ajax.cfm");

Autocomplete expects an input element with id "input_box" to exist. When the user starts typing in the input field, autocomplete will request autocomplete_ajax.cfm with a GET parameter named q

thats a bit that I don't get. Where should I say that? And as soon as I put it somewhere, I just need to name one of my inputs " input_box "?

Thank you in advance.

+4
source share
2 answers

There are three steps:

1) create a completely normal form with an input field using the HTML helper in your view:

 // app/views/foo_bars/search.ctp <?php echo $this->Form->create('FooBar'); echo $this->Form->input('field'); echo $this->Form->end('Submit'); ?>

2) You have jquery autocomplete:

 // app/views/foo_bars/search.ctp <?php echo $this->Html->scriptBlock( .'$("#FooBarField").autocomplete({' .'source:"/foo_bars/find",' .'delay: 100,' .'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},' .'open:function(event,ui){$(this).parent().parent().children("input").val(0);}' .'});' array('inline' => false)); ?>

3) Request the database through the controller to obtain the possible values:

 // app/controllers/foo_bars_controller.php <?php public function find() { if ($this->RequestHandler->isAjax()) { $this->autoLayout = false; $this->autoRender = false; $this->FooBar->recursive = -1; $results = $this->FooBar->find('all', array('fields' => array('id', 'name'), 'conditions' => array('name LIKE "%'.$_GET['term'].'%"'))); $response = array(); $i = 0; foreach($results as $result){ $response[$i]['value'] = $result['FooBar']['name']; $response[$i]['id'] = $result['FooBar']['id']; $i++; } echo json_encode($response); } } ?>
+2
source

echo $ this-> Html-> scriptBlock (

$ ("# FooBarField"). Autofill ({'

  .'source:"/Search/find",' .'delay: 100,' .'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},' .'open:function(event,ui){$(this).parent().parent().children("input").val(0);}'

. '}); '.

 array('inline' => false));
-2
source

More articles:


All Articles