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テーマに限った話でもなくて、引き合いにだしたのは、なんとなくシンプルでいいなあと思ったというだけです。以上です。