サイト内検索を見直してみる(suggest + blog_ajax_json_search)

クリプトを使って検索するのも面白いかも。。。と思って試してみる事にしました。
通常の検索でも十分過ぎる程便利なスクリプトなのですが、せっかくなので候補表示機能もくっつけてみる事にしました。

利用するのは以下のふたつ。スクリプト苦手な私なのでさぁ大変。できるかな?

suggest.js - 入力補完ライブラリ
暴想: ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

必要なファイルをDLする

Prototype JavaScript framework: Download Prototype
suggest.js - 入力補完ライブラリ
■検索ライブラリ・・・CCライセンスにより、ファイル内のライセンス表記を消さないなら改変・配布はOKとのこと。

http://www.materializing.net/js/blog_ajax_json_search.txt
上記リンク先のテキストを保存して「blog_ajax_json_search.js」にリネームです。
3つのjsファイルは ブログURL/js/~.js みたいに「jsディレクトリ」内に置く事にします。

検索データを用意する

検索用のテンプレートを用意します。「テンプレートを新規作成」から。

  • テンプレート名・・・search_data.txt
  • 出力・・・js/search_data.txt
  • 再構築チェック・・・入れる
  • 内容・・・下記コード
<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"
<$MTEntryBody remove_html="1" encode_js="1"$>
<$MTEntryMore remove_html="1" encode_js="1"$>
<MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>[<$MTEntryCategory remove_html="1" encode_js="1"$>]<MTEntryIfTagged>[<MTEntryTags glue=",">
<$MTTagName remove_html="1" encode_js="1"$>
</MTEntryTags>]<MTElse>[登録なし]</MTElse></MTEntryIfTagged><MTIfNonEmpty tag="MTEntryKeywords">[<MTEntryTagwires glue=",">
<$MTTagwire remove_html="1" encode_js="1"$>
</MTEntryTagwires>]<MTElse>[登録なし]</MTElse></MTIfNonEmpty>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

※通常に加えてタグとかキーワードとか色んなものも試しに入れてみてるんで、不要な箇所は適宜削除で。

検索フォームを用意する

この時点で、suggest(候補表示)に備えての準備要素も組み込んでしまいます。

<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>js/search_data.txt', document.getElementById('search_box').value );">
<input type="search" id="search_box" name="search" 
value="" size="15" autocomplete="off" />
<button type="submit" id="search_button"
 onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>js/search_data.txt', 
document.getElementById('search_box').value );">サイト内検索</button>
</form>
<div id="suggest"></div><!-- 補完候補表示エリア -->
<noscript><p>「検索」はブラウザのスクリプト設定が有効な際に機能します。</p></noscript>

先に作成した search_data.txt までのパス指定箇所は2箇所。
入力フォームのオートコンプリートはオフに指定。候補は別に出すので。
ボタンは button タグ使ってるんで、CSSで画像置換とか出来ます。
フォーム直下に候補表示。

検索結果の表示

デフォルトの検索結果は

<div class="content">~</div>

に表示されます。

別にこれで不都合が無ければそのままで良いのですが、私の場合は不都合なので修正する事にします。
「blog_ajax_json_search.js」を開いて、69行目の「content」を任意の文字に変更します。

if ( div_tag[i].className == 'content' ) {

ここでは「resulting」にしてみました。
これで検索結果は

<div class="resulting">~</div>

として表示されます。適度な箇所に記述しておきましょう。

検索候補を用意する

候補として挙げるキーワードのリストを作成します。「テンプレートを新規作成」から。

  • テンプレート名・・・list
  • 出力・・・js/list.js
  • 再構築チェック・・・入れる
  • 内容・・・下記コード
var list = [
<MTTags glue=",">"<$MTTagName encode_js="1"$>"
</MTTags>
];

ここでは、候補として表示させるものにタグを選んでみました。

やろうと思えばキーワードとかもつっこめそうですが、ここはお手軽にこんな感じで。
これで検索フォームに何か入力した際に、その文字と適合するものが存在すれば候補として表示されるようになります。
ここまでで、

  • 検索対象
  • 検索するもの
  • 検索結果を表示するもの

が揃いました。

スクリプトが機能するようにする

下記コードを <head>~</head> 内に記述します。

<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/suggest.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/blog_ajax_json_search.js">
</script>

<script type="text/javascript" language="javascript">
      Event.observe(window,
                    'load',
                    function(){
                      new IncSearch.SuggestTag("search_box", "suggest", list, {dispAllKey: true ,highlight: true});
                    },
                    false);
</script>
<script type="text/javascript" src="<$MTBlogURL$>js/list.js"></script>

suggest に関してオプション指定を行ってます。
他のオプション指定等については配布ページを見るのが良いです。

このサイトでは、ハイライト指定を行ってるのにハイライトされないなんて口が裂けても言えません。

suggest用のスタイルシートを追加する

suggestの配布ページにて、基礎となるスタイルシートが書いてありますので、それを用いて好みのスタイルに改変すると良いかと思います。
あとは、検索結果でハイライトされるカラーは、blog_ajax_json_search.js の189行目の「#FFCC33」を変更する事で可能みたいです。

以上で、検索候補表示とスクリプト検索が出来上がりました。
おしまい_(..)_

あとがき

検索結果が表示されるまでの時間がとても短いです。素晴らしいライブラリですね。何か他の使い方もないかな。。。

最初はインクリメンタルサーチとタグを使って何かしようと思ったのですが、とりあえずAjaxSearchに挑戦してみました。
通常のCGI検索ボックスを残しているのは、あくまでテストとして置いてみたものなので。
こんな風に単なるテストなら、別のサイトとかでやってみたら良いのにーって感じですね。
Lab開設くるー・・・?
っていうかローカル環境がLabなのでまだ何もやりません。

[参考サイト]
暴想: ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

MovableType超高速サイト内検索!これ作った人神!

▲ to Top

コメント(2)

suggest.jsと組み合せたのは面白いですね。
私もこのスクリプト、以前使っていたんですが、検索用データを作っとかなきゃならないじゃないですか。その手間を省きたいんで、やめたんですよね。検索時のレスポンスは満足してたんですが。

ちょうど、今mixiで「Movable Typeの検索システムを考える」っていうトピが立ってます。
http://mixi.jp/view_bbs.pl?id=16080801&comment_count=3&comm_id=394048
面白い展開にならないかなぁと思ってるんですが。

>>oscar さん
検索用データを準備する点が気になりますよね。
これって、エントリー全部書き出す必要があるから動作が心配ですよね。それもあって、テスト的にわざと他の点も加えて重くしてみたんですよ。
エントリー数が500くらいになったら心配かもです。なんとなくですが・・・。


suggest楽しいです。管理画面のタグやキーワード入力補完としても使えるかもしれません。


気になるトピ紹介ありがとございます_(..)_
なんてタイムリーな・・・。これは良い勉強になりそうです。

トラックバック(0)

▲ to Top