PHPプロ!TIPS+

PEAR::HTML_QuickForm_Livesearchを試してみよう

PEAR::HTML_QuickForm_LivesearchはPEAR::HTML_QuickFormパッケージの一つで、Livesearch機能を持つinputテキスト要素を生成します。

Livesearch機能とは、ちょうどGoogle suggestのような、テキストボックスにキー入力が行われる度にその段階までの入力での検索結果がドロップダウンリストとして返される、AJAX技術を用いた動的な検索機能です。

HTML_QuickForm_Livesearchは現在バージョン0.3.2のbetaバージョンとなっています。

http://pear.php.net/package/HTML_QuickForm_Livesearch

-- インストール --
pear install HTML_QuickForm_Livesearch-beta
※HTML_QuickForm 及び HTML_AJAXも必要です。

-- index.php --
<?php
require_once 'HTML/QuickForm.php';
require_once 
'HTML/QuickForm/livesearch_select.php';
require_once 
'myfunction.php';
$form = new HTML_QuickForm('firstForm');
$form->addElement('livesearch_select''Program''プログラム言語',
                 array(
                      
'elementId' => 'search',
                      
'callback' => array('Test''getTestName'),
                      
'searchZeroLength' => 1,
                      
'buffer' => 350,
                      
'printStyle' => 1,
                      
'autoComplete' => 1
                      
),
                      array(
'size' => '50')
                  );
$form->addElement('submit'null'送信'array('id'=>'submit'));
$form->addRule('Program''入力して下さい''required'null'server');
if (
$form->validate()) {
  
$form->freeze();
   
$form->addElement('text''back''<a href="index.php">戻る</a>');
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Livesearch QuickForm Test</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<?php
$form
->display();
?>
</body>
</html>

-- myfunction.php --
<?php
/**
 * callback用クラス
 */
class Test {
    function 
getTestName($dbh$id) {
        
$livesearch array(
                              
=> 'PHP',
                              
=> 'Perl',
                              
=> 'Java',
                              
=> 'Ruby',
                              
=> 'Python',
                              
=> 'JavaScript',
                              
=> 'CSS',
                           );
        if (
$id 0) {
            return 
$livesearch[$id];
        }
    }
}
?>

-- auto_server.php --
<?php
/**
 * Ajaxリクエスト処理クラス
 */
include 'HTML/AJAX/Server.php';
class 
LiveServer extends HTML_AJAX_Server {
  var 
$initMethods true;
  function 
initLivesearch() {
    include 
'livesearch.class.php';
    
$this->registerClass(new livesearch());
  }
}
$server = new LiveServer();
$server->registerJSLibrary('QfLiveSearch','live.js','./');
$server->handleRequest();
?>

-- livesearch.class.php --
<?php
/**
 * Ajaxリクエスト検索クラス
 */
class livesearch {
  var 
$livesearch array(
    
=> 'PHP',
    
=> 'Perl',
    
=> 'Java',
    
=> 'Ruby',
    
=> 'Python',
    
=> 'JavaScript',
    
=> 'CSS',
    );
  function 
search($input) {
    
$ret array();
    foreach(
$this->livesearch as $key => $value) {
      if (
stristr($value,$input)) {
        
$ret[$key] = $value;
      }
    }
    return 
$ret;
  }
}
?>

このサンプルでは、inputボックスにアルファベットを入力すると、一覧に含まれる文字があれば、該当項目を返して、選択できるようになります。検索方法は livesearch.class.phpにて自由に変更できます。

実際の動作ですが、IE6.0 & Firefox1.5では動作しましたが、Operaでは上下キーでの選択ができないようです。また、選択項目をEnterキーで決定した場合、同時にSubmitされてしまったりと、動作に不安定な部分も見られます。

Suggestの機能を実装するにはJavaScriptのライブラリの「script.aculo.us」や「YUI Library」などがありますが、PEAR::HTML_QuickForm_Livesearchの場合、HTML_QuickFormを使っている方は作成が簡単に行えることや、PHPのコードだけを書けばいいので管理もしやすくなるのではないでしょうか。安定版リリースの際には検討してみるのもいいかもしれません。

バックナンバーについて

TIPS-MLは、毎週金曜日に更新され、新しい記事が掲載されます。

Tipsꗗy[W 

Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)