Auto Redirect in CakePHP jQuery AutoComplete

Demo : http://cbunny.rudylee.com/autocomplete_redirect

Demo source code : https://github.com/rudylee/cbunny

In my previous post ( http://blog.rudylee.com/2011/07/25/jquery-ui-autocomplete-in-cakephp/ ) we have successfully integrated the jQuery AutoComplete with CakePHP with a little bit hacky way. Now we gonna add another feature that can redirect user to our desired place when they click the result value in the AutoComplete ( try the demo for more details ).

So let’s start the coding ( I assume you have integrated the jQuery UI AutoComplete in your apps, if you haven’t, just read my previous post ), so basically what we need to do are divided into 4 steps:

  • Wrap the jQuery UI AutoComplete search field in a form tag.

  • Add a hidden field which will hold the ID of the result.

  • Add ‘select’ option into the helper.

  • Set up the action that will handle the form submit

Here is the sample of the action code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function admin_autoComplete() {
  if (!empty($this->data)) {
      $this->redirect(array(
      'controller' => 'users',
      'action' => 'view', $this->data['Guest']['id']
        ));
    }
    $this->autoRender = false;
    $guests = $this->User->getGuests(array(
      'conditions' => array(
      'OR' => array(
          'User.name LIKE' => '%' . $_GET['term'] . '%',
          'User.surname LIKE' => '%' . $_GET['term'] . '%'
      )
      )
      ));
    echo json_encode($this->User->autoComplete_encode($guests));
  }

Just ignore line 8 and so, we gonna focus on line 2 to 7. In that line, I redirect the user to the view action which based on the Guest ID which I got from the form. You can change the controller/action in this section. I hope everything are clear. Cheers.

Comments