Nakajiman Software Blog: oogo Plugin for jQuery 1.1.2

このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索！」のような動きのある効果にも応用できそうですね。

検索ボックスにキーワードをカチカチと入力し、検索ボタンをクリック！のようなテレビ CM の結びをよく見かけます。いわゆる「○○で検索してください」という手法です。このキーワードをカチカチと入力する雰囲気を実現する jQuery プラグインを作ってみました。

oogo Plugin と名付けました。oo (オーオー) は「○○を検索してください」の「○○を」を、 go (ゴー) は「検索してください」を表現したつもりです。oogo Plugin は Delay Plugin for jQuery 1.1.2 に依存しますので、あわせて使ってください。

検索ボックスのキーワードを入力する input タグに oogo メソッドを適用します。oogo メソッドは、指定したキーワードを1文字ずつに分割し、その文字を Delay Plugin を使って 500 ミリ秒の間隔で1文字ずつ追加するようにします。キーワードを省略すると、事前に入力してあったキーワードを使うようにしています。

これにより、検索ボックスにキーボードでカチカチと入力したような効果が実現できています。

oogo Plugin for jQuery ダウンロード

/*
 * oogo Plugin for jQuery 1.1.2
 *
 * Copyright(C) 2007 LEARNING RESOURCE LAB.
 * http://postal-search-apis-and-solutions.blogspot.com/
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Depend on Delay Plugin for jQuery 1.1.2
 * http://postal-search-apis-and-solutions.blogspot.com/
 */
(function($) {

  // $.oogo
  $.oogo = {

    // $.oogo.interval
    interval: 500
  };

  // oogo -- depend on Delay Plugin for jQuery
  $.fn.oogo = function(val) {
    var self = this;
    self.each(function(i, n) {
      $.each((val || n.value).split(''), function(i, v) {
        jQuery(n).delay(function() {
          this.value += v;
        });
      });
      n.value = '';
    });
    $.resume($.oogo.interval);
    return self;
  };

})(jQuery); // function($)

次のサンプルは、Google の検索ボックスに FM/V のテレビ CM で話題になった「地底人は誰？」というキーワードを指定したものです。キーボードを使ってカチカチっと入力したかのように見えませんか?

oogo Plugin for jQuery サンプル

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript" src="jquery.oogo.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('input[@name=q]').oogo('地底人は誰？');
});
//]]>
</script>

oogo Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。