for MOBILE powerd by MT4i
Individual Archive
Incremental Search by Ajax.
Movabletype 2005/02/25 13:52:05 2/0

JavaScript+XmlHttpRequestを組み合わせたエントリタイトルのインクリメンタル検索を導入してみました。

どうぞお試し下さい。
Search

(ただしOperaでは動作しません。おそらくActiveXあたりの問題かと思われます。)

この実装は、blog.bulknews.netさん経由antipop 2.0さんで知りました。

全エントリのタイトルと日付、PermaLinkをテキストファイルに書き出して、XmlHttpRequestで配列に読み込み、onkeyupイベントを利用して検索を行うという感じです。

素晴らしい実装です。勉強になります。

セキュリティの観点上からか、検索エンジンは2つの.jsファイルを読み込むようになっています。この.jsファイルは新規インデックスとしてテンプレートに追加します。
検索用ページとして、Search.htmlを新規に作成して検索エンジンを組み込んでみました。
使い勝手がいいです。ホント。

***
Ajaxについてはこちらを参照。
vas-animatumさん。

***
以下、導入時に気づいたことを。
・main.jsで検索結果を書き出すところにあるAタグが閉じていないのを修正。

今、antipop2.0さんがサーバダウンしているようなのでMTへの導入方法を示します。
1:Ajaxエンジンファイル作成。(インデックステンプレートで作成)
MTEntrySearch.js
IncrementSearch.js

2:エントリリスト作成。(インデックステンプレートで作成)
→entries_list.txt

<MTArchiveList>
<$MTArchiveLink$><><$MTArchiveTitle$><><$MTEntryDate format="%Y/%m/%d %H:%M"$>
</MTArchiveList>

3:検索用ページ作成。インデックステンプレートで作成。
→search.html
→HTMLのHEADに以下を追加。

<script src="MTEntrySearch.js" type="text/javascript"></script>
<script src="IncrementSearch.js" type="text/javascript"></script>

→HTMLのBODYに以下を追加。

<input type="text" name="search" size="80" value="" onkeyup="search(this.value)" />
<ul id="result">
</ul>

※この件に関するコードの著作権はantipop 2.0のKentaro Kuribayashiさんにあります。

Trackback :: http://www.loungelabel.com/mt/mt-tb.cgi/626

Comment

by ちょこAuthor Profile Page

EUCでサイトを構築しているせいか、日本語が正しく検索できません。
何か良い解決方法ありませんか?

>2:エントリリスト作成。(インデックステンプレートで作成)
>→entrys_list.txt
正しくはentries_list.txtですね?

by maxi .

>ちょこさん。
気になったので、日本語で試してみましたが
うまく検索できませんね(笑)

いろいろ試してみますが、理解度が浅いのであてにならないかもしれません。
どうぞご容赦下さい。

>正しくはentries_list.txtですね?
その通りです。
ご指摘ありがとうございます。

Post a Comment