« ココログ記事検索の仕組み Part 2 | トップページ | prototype.js で Ajax »

2006年6月26日 (月)

ココログ記事検索の仕組み Part 3

さて、最後は検索と検索結果の表示です。
検索は昨日載せたBlogEntryクラスのsearchメソッドで行っているのですが、特に変わったことはしておらず、単に正規表現で マッチしたらヒットした部分付近の文字列を返しているだけです。
そして、その結果表示は以下のような感じで行っています。
var root = document.createElement('div');
				
var te = document.createElement('a');
te.appendChild(document.createTextNode(entry.title));
te.href = 'javascript:showEntry("'+entry.url+'");';
root.appendChild(te);

var ce = document.createElement('div');
ce.innerHTML = hitString;
root.appendChild(ce);

$("result_element").appendChild(root);
エレメントをいくつか生成していますが、これは以下のような構造のHTMLを構築しています。
<div>
<a href="javascript:showEntry(URL);">タイトル</a>
<div>ヒットした部分文字列</div>
</div>
$("result_element") の部分は見慣れないかもしれませんが、これはPrototype.jsで定義されている関数で、 DynamicHTMLで頻繁に登場する document.getElementById の代わりに使用することが出来ます。
これによって、コードが若干短く、見やすくなると思います。
つまり、この場合は
document.getElementById("result_element").appendChild(root);
と同じことを行っています。
result_elementというのは、あらかじめ結果表示用に用意してある緑色の枠のレイヤーです。

これで、検索結果を表示用に用意してあるレイヤーに挿入できましたので、後はレイヤーを表示して完了です。
ここまで見ていただけるとわかるように、コードの大半は記事の抽出のためのものですので、記事が増えると遅くなってしまうと思いますが、 少しずつ改良していく予定です。

|

« ココログ記事検索の仕組み Part 2 | トップページ | prototype.js で Ajax »

コメント

ご丁寧に解説していただき、ありがとうございました。大変参考になりました。

投稿: ドラねこ | 2006年6月26日 (月) 13時16分

こんばんは。説明不足の部分もあると思いますが、大体こんな感じでやってます。
また何かありましたら、コメントくださいね。

投稿: やまねこ | 2006年6月26日 (月) 18時48分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10681197

この記事へのトラックバック一覧です: ココログ記事検索の仕組み Part 3:

« ココログ記事検索の仕組み Part 2 | トップページ | prototype.js で Ajax »