AJAX

JavaScriptライブラリのjQueryを使用します。

jQueryをインストールする

web/js/に配置 

% cd web/js
% wget http://jqueryjs.googlecode.com/files/jquery-1.3.2.js

インクルード 

% vi apps/frontend/templates/layout.php 


  <?php use_javascript('jquery-1.3.2.js') ?>
  <?php include_javascripts() ?>
</head>

JQueryを使って検索機能を強化

% vi web/js/search.js

$(document).ready(function()
{
  $('.search input[type="submit"]').hide();
 
  $('#search_keywords').keyup(function(key)
  {
    if (this.value.length >= 3 || this.value == '')
    {
      $('#loader').show();
      $('#jobs').load(
        $(this).parents('form').attr('action'),
        { query: this.value + '*' },
        function() { $('#loader').hide(); }
      );
    }
  });
});

% vi apps/frontend/templates/layout.php 

<?php use_javascript('search.js') ?>

アクションにおけるAJAX

% vi apps/frontend/modules/job/actions/actions.class.php

public function executeSearch(sfWebRequest $request)
{
  if (!$query = $request->getParameter('query'))
  {
    return $this->forward('job', 'index');
  }
 
  $this->jobs = JobeetJobPeer::getForLuceneQuery($query);
 
  if ($request->isXmlHttpRequest())
  {
    return $this->renderPartial('job/list', array('jobs' => $this->jobs));
  }
}

ユーザーが検索ボックスのすべての文字を削除する場合、もしくは検索が結果を返さない場合、空白ページの代わりにメッセージを表示する必要があります。 

% vi apps/frontend/modules/job/actions/actions.class.php

public function executeSearch(sfWebRequest $request)
{
  if (!$query = $request->getParameter('query'))
  {
    return $this->forward('job', 'index');
  }
 
  $this->jobs = JobeetJobPeer::getForLuceneQuery($query);
 
  if ($request->isXmlHttpRequest())
  {
    if ('*' == $query || !$this->jobs)
    {
      return $this->renderText('No results.');
    }
    else
    {
      return $this->renderPartial('job/list', array('jobs' => $this->jobs));
    }
  }
}

AJAXのテスト

% vi test/functional/frontend/jobActionsTest.php

$browser->setHttpHeader('X_REQUESTED_WITH', 'XMLHttpRequest');
$browser->
  info('5 - Live search')->
 
  get('/search?query=sens*')->
  with('response')->begin()->
    checkElement('table tr', 2)->
  end()
;