mt5のPicoテーマの検索ウィジェットでdafaultValueをいれてみる

MovableType 5に同梱されている、Picoテーマで検索フォームで初期値をいれつつ、テンプレートを一元管理できるようにしてみました

単に、input要素のvalue属性に任意のワードを入れればいいのかと思っていたら、Picoテーマではvalue属性に<$MTSearchString$>がはいっていました。昔のテンプレートではSearchみたいな単語がはいっていた気がしたのですが、この状態では、検索フォームの初期値がない状態で使うことが前提という感じがしました。

そこで、初期値をいれるカスタマイズをおもいつきました。分岐については、以下のような方法を考えました。

まずは、日本語名で「検索」というテンプレート名のウィジェットテンプレートの先頭に以下を埋め込んで見ます。

<mtsetvars>defaultVal=キーワード
searchword=<$MTSearchString$>
</mtsetvars>
<mt:if tag="SearchString">
<mtsetvar name="defaultVal" value="$searchword">">
</mt:if>

変数名は任意でして、ここでは初期値としてdefaultVal(ここでは値を「キーワード」。この値も任意で)、検索されたキーワードを格納する変数にsearchwordとしています。

次に、同じく、検索ウィジェットで、<input type="text" id="search" class="ti" name="search"という部分を探して、value属性の<$MTSearchString$>を以下のように書き換えます(途中で折り返してますが、一行書きです)。

<input type="text" id="search" class="ti" name="search"
 value="<mt:var name="defaultVal">" />

これで、検索結果以外では「キーワード」という初期値で、検索をかければ、その値が検索フォームに入力されている状態となります(確認はMTOS 5にておこなっています)。

ここまできたら、検索フォームがフォーカスされているとき、初期値を空にするというのも追加してみたいと思います(欲張りです)。

バナーフッターあたりに以下のコードを入れておくことで実現可能かと。jQueryの本体は用意しておくか、Google AJAX APIを利用するなどします。

<script type="text/javascript" src="path-to/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#search').focus(function(){
    if($("#search").val !== "")
        { $(this).val(""); }
    }).blur(function(){
        if($(this).val()=="")
          { $(this).val(this.defaultValue); }
    });
});
</script>

コード自体は、第9回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(1)|gihyo.jp ... 技術評論社にて紹介されているものそのものです。特に説明の必要も無いかと。

と、まあこんな感じです。でもこれPicoテーマに限った話でもなくて、引き合いにだしたのは、なんとなくシンプルでいいなあと思ったというだけです。以上です。

Picoテーマを紹介されているサイト様