In this post will explain how to integrate Twitter Bootstrap Typeahead with your CakePHP 1.3 application.
Make sure you have include jQuery, Bootstrap CSS and Bootstrap Javascript files in your CakePHP application. You can simply do it inside your default.ctp file.
For this example, we will create action index(), typeahead_search() in users_controller.php. We also create view for index.ctp and users_typeahead.ctp.
In this tutorial I’ll use Users controller. I’ll start by creating index() action, here is the code :
public function index() {
//some code
}
And here is the view :
1: <div class="row">
2: <div class="span12">
3: <!-- Typeahead -->
4: <div class="pull-right">
5: <input type="text" data-provide="typeahead" id="user-typeahead">
6: </div>
7: //other code
8: </div>
The next step is to create Javascript object in your layout file. So add this code snippet in your default.ctp file :
1: <script type="text/javascript">
2: var site_url='<?php echo $this->base; ?>';
3: </script>
This snippet of code will create Javascript object which contains the root URL path of CakePHP.
After we have the Javascript object variable, let’s continue by
creating the Javascript code. Inside your application Javascript file
add these code :
1: $('#user-typeahead').typeahead({
2: source: function (query, process) {
3: return $.ajax({
4: url: site_url + 'users/typeahead_search',
5: type: 'get',
6: data: {q: query},
7: dataType: 'json',
8: success: function (json) {
9: return process(json);
10: }
11: });
12: }
13: });
In this code, we initialize the typeahead library and create AJAX
request to the typeahead_search action. In the next step, we will create
typeahead_search action that will handle AJAX request and return JSON
result. Back to our users controller, create the typeahead action which
will contain this code :
1: class UsersController extends AppController {
2: var $components = array('RequestHandler');
3: public function typeahead_search() {
4: if($this->RequestHandler->isAjax())
5: $this->RequestHandler->respondAs('json');
6: // get the search term from URL
7: $term = $this->request->query['q'];
8: $users = $this->User->find('all',array(
9: 'conditions' => array(
10: 'User.username LIKE' => '%'.$this->params['url']['q'].'%'
11: )
12: ));
13: // Format the result for select2
14: $result = array();
15: foreach($users as $key => $user) {
16: array_push($result, $user['User']['username']);
17: }
18: $users = $result;
19: echo json_encode($users);
20: }
21: }
This action will receive the request, search the database for relevant result and return it on JSON format.
Ref Site : http://www.rudylee.com/cbunny2/
