Twitter Bootstrap Typeahead with your CakePHP 1.3

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/