トップ  > JavaScript  > jQuery  > 記事

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

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

 
  • 2009/09/29




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

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

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


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



■ソース
・sample.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Jquery AUTOCOMPLETE</title>
  6. <link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css" />
  7. <script type="text/javascript" src="/js/jquery.js"></script>
  8. <script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
  9. <script type="text/javascript">
  10. $(function() {
  11.   $('#hoge').autocomplete('/search.php');
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <input type="text" size="50" name="hoge" id="hoge" />
  17. </body>
  18. </html>

・search.php (プラグインのデモに含まれていたままです)
  1. <?php
  2.  
  3. $q = strtolower($_GET["q"]);
  4. if (!$q) return;
  5. $items = array(
  6. "Great <em>Bittern</em>"=>"Botaurus stellaris",
  7. "Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
  8. "Black-necked Grebe"=>"Podiceps nigricollis",
  9. 省略
  10. "Green Heron"=>"Butorides virescens",
  11. "Solitary Sandpiper"=>"Tringa solitaria",
  12. "Heuglin's Gull"=>"Larus heuglini"
  13. );
  14.  
  15. foreach ($items as $key=>$value) {
  16.   if (strpos(strtolower($key), $q) !== false) {
  17.     echo "$key|$value\n";
  18.   }
  19. }
  20.  
  21. ?>


たったこれだけですね。

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

  1. $('#hoge').autocomplete('/search.php');
だけとなります。

このautocompleteプラグインですが、動作も軽快ですし、数が多いとスクロール表示にしてくれたりと中々きれいだと思います。
CSSの指定もオプションで変更できたりするので、表示も簡単に変更できます。
また、戻りコールバック関数を指定できたりと結構JS側で補完候補を受け取ってからの処理がカスタマイズできます。
オプションや、利用等については、Plugins/Autocomplete - jQuery JavaScript Libraryのページにも詳しく載っています。

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

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

引用元

更新:2009/09/30 01:19 カテゴリ: JavaScript  > jQuery ▲トップ

Python

フロントエンド開発

Docker

AWS

nginx

Node.JS

Linux

web開発

サーバ管理

GCP

svn・git

ソース・開発

プロマネ

HTML・CSS

JavaScript

Alexa

webサービス運用

webサービス

Mac

MySQL

PHP

FuelPHP

ツール, ライブラリ

ビジネス

テンプレート

プレゼン

マネタイズ

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0