Safari独自実装のinput type=”search”のような検索窓を実装する

先日、iPhone風のテキストボックスの文字を消去するボタンを実装するチュートリアルを書いたのですが、どうやらSafariの独自実装でinput type=”search”というのがあるんですね。全然知らなかった…じゃあいっそのことplaceholderも付けてinput type=”search”っぽくしてみようということで、delval.jsをちょちょっと変えてinput type=”search”ぽい検索窓を実装してみます。これもかなり簡単にできるので、じゃあチュートリアル…？？

左が今回作ったサンプルで、右がSafari独自実装のinput type=”search”。そっくり！

サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード

delval.jsとの違いをふまえてHTMLをマークアップする

delval.jsとの違いは

• optionでplaceholderのテキスト変更できる
• placeholderを追加
• わかりやすいようにID、CLASSをdelvalからinputSearchにした

です。見た目はCSSでうまいことやればきれいにいけますので、それを採用してます。また検索窓なので、必然的にFORM要素の中に入れる必要があると思います。これをふまえて検索窓をマークアップすると以下のようになります。

^

    

Site Search

     ^

delval.jsにplaceholder機能を追加する

次はJS部分ですが、主にdelval.jsと同じです。jQueryで拡張したfunctionに追記していきますので、前もってjQueryを読み込んでおいてください。(サンプルに入ってます）9割delval.jsと同じなのでかぶってるところは割愛しますが、大きく違うのはplaceholderがあるかないかということです。placeholderの機能は

• INPUTのVALUEが空ならテキストを表示
• INPUTにfocus()でplaceholderを消去

くらいでしょうか。
変更点にはコメントを加えているのでdelval.jsと比較してみてください。

$.fn.inputSearch = function(options){

  // placeholderのテキストを変えるオプション
  var c = $.extend({
    placeholder: "search..."
  },options);

  $(this).each(function(i){

    var self = $(this);

    self.wrap("");
    $("span#inputSearch-"+i)
      .append("")
      // グループにplaceholderを追加しておく
      .append(""+c.placeholder+"")
      .addClass("inputSearch-group");

    var group = $("span#inputSearch-"+i).css("height",self.attr("offsetHeight")),
      btn = $("span.inputSearch",group).css("height",group.height()),
      // あとで何回か使うので変数にしておく
      placeholder = $("span.placeholder","#inputSearch-"+i);

    if(self.val().length<1){
      btn.hide();
    }else{
      // selfに文字列がある場合は隠す
      placeholder.hide();
    }

    self.focus(function(){
      // focus()で隠す
      placeholder.hide();
    }).blur(function(){
      // blur()時に文字列がなければ表示する
      if(self.val().length<1) placeholder.show();
    });

    // placeholderをクリックしたらselfにfocus()する
    placeholder.click(function(){
      self.focus();
    });

    self.keyup(function(){
      if(self.val().length>0) btn.show();
      else btn.hide();
    });

    btn.click(function(){
      self.val("");
      btn.hide();
      self.focus();
    });

  });
}

placeholderの実装原理は結局のところdeleteボタンと同じで、INPUT要素に重ねて表示しておいてINPUTにfocus()だとかその辺のイベントが発生したときに隠す、ということです。

背景などをCSSで定義する

最後に今までの実装方法をふまえてCSSをさらっと書きます。というか、ほとんどdelval.jsのときと同じです。背景に画像をしいて、placeholderの位置を追加しただけです。簡単です。Safariが実装しているtype=”search”が高さ、幅の指定を実装していなかったのでこれも高さと幅は可変じゃないです。// 幅も高さも固定なのでフォントサイズもptで固定したほうがいいかもしれません。

/* form要素自体に背景を表示させる */
form {
  width: 148px;
  height: 19px;
  background: url(../img/input_search.gif) no-repeat;
}

  /* legendは不要なので非表示にする */
  form legend {
    display: none;
  }

/* これはJSがオフの場合 */
  form input {
    margin-left: 23px;
    border: none;
    padding: .1em 0;
    width: 125px;
    background: none;
  }

/* ここから下はdelval.jsのときと同じ */
  form span.inputSearch-group {
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
  }

    form span.inputSearch-group input {
      padding-right: 25px;
      width: 100px;
    }

    form span.inputSearch-group span.inputSearch {
      width: 17px;
      position: absolute;
      right: 2px;
      top: 1px;
      background: url(../img/delval.gif) no-repeat left center;
      cursor: pointer;
    }

    /* 新しくplaceholderのスタイルを追加 */
    form span.inputSearch-group span.placeholder {
      position: absolute;
      top: 2px;
      left: 23px;
      color: #888;
      font-size: 93%;
    }

実行とオプション

あとは好きなところで実行してください。

$(function(){
  $("input#s").inputSearch();
});

以下のようにすればplaceholderのテキストを変更できます。

$(function(){
  $("input#s").inputSearch(
    placeholder: "検索窓やでここは"
  );
});

というわけで、とても簡単に実装できましたね。ここまで作って気がつきましたが、Safariのは検索履歴が見れるんですね。なるほどー。tangoHokan.jsを使えば同じようなことできるなーとも思いながら面倒になったのでやめておきます…

サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード