検索ボックスでカチカチとキーワード入力を再生する jQuery oogo プラグイン

ホーム > Postal Search Ajax API with jQuery > Forms with Function

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

jQuery oogo プラグインと名付けました。oo (オーオー) は「○○を検索してください」の「○○を」を、go (ゴー) は「検索してください」を表現したつもりです。このプラグインは指定した処理をキューに追加して後でまとめて実行する jQuery Delay プラグインに依存しますので、あわせて使ってください。

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

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

ダウンロード

jquery.oogo.js (Uncompressed only)

(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 で話題になった「地底人は誰？」というキーワードを指定したものです。キーボードを使ってカチカチっと入力したかのように見えませんか?

<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>

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

検索ボックスでカチカチとキーワード入力を再生する jQuery oogo プラグイン

ダウンロード

デモ

関連情報