jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる : アシアルブログ

2009/09/29 │カテゴリ： Tech　 JavaScript　 jQuery　

jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる

こんにちは、中川です。

アシアルブログの検索でも利用している、suggest(入力補完)機能、便利ですよね。
以前「jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる」という記事で松田がライブラリ紹介しています。

しかし、「jquery.suggest」ですが、表示が味気なかったり、カスタマイズ面で、若干モノ足りない部分が出てきました。。。
で、補完機能を実装する為のJavaScriptですが、いろいろ探せば結構たくさんでてきまして、その中でも使いやすく、機能も豊富でカスタマイズもしやすいjQueryプラグインの「Autocomplete」というものを見つけましたので紹介したいと思います。

■ダウンロード先
http://plugins.jquery.com/project/autocompletex

■デモ
※適当にアルファベットを2文字くらい入力してください。

■ソース
・sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AUTOCOMPLETE</title>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function() {
$('#hoge').autocomplete('/search.php');
});
</script>
</head>
<body>
<input type="text" size="50" name="hoge" id="hoge" />
</body>
</html>

・search.php (プラグインのデモに含まれています)

<?php
$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
"Great <em>Bittern</em>"=>"Botaurus stellaris",
"Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
・
・
省略
・
・
"Green Heron"=>"Butorides virescens",
"Solitary Sandpiper"=>"Tringa solitaria",
"Heuglin's Gull"=>"Larus heuglini"
);
foreach ($items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
echo "$key|$value\n";
}
}
?>

たったこれだけですね。

単純にAjaxでサーバ側に補完リストを問い合わせる実装の場合、JS側のコードはinputのID（もしくはクラスなどの対象のCSSセレクタ）を指定してあげて、

$('#hoge').autocomplete('/search.php');

だけとなります。

このautocompleteプラグインですが、動作も軽快ですし、数が多い時はちゃんとスクロール表示にしてくれたりとデフォルトのまま使用しても中々きれいだと思います。CSSの指定もオプションで変更できたりするので、表示も簡単に変更できます。

また、コールバック関数を指定できますので、JS側で補完候補を受け取ってから処理のカスタマイズを行えます。
オプションや、利用等については、Plugins/Autocomplete - jQuery JavaScript Libraryのページに詳しく載っています。

また、プラグインをダウンロード解凍した中に、多くのデモも含まれているので参考になると思います。
※デモはjQuery Autocomplete Plugin Demoでも確認できます。

ではでは、是非試してみてください。