ページ内のみの検索窓(?)

質問

ホームページ上から指定のファイルをダウンロードすることが出来るようにページを作ろうかと思っています。イメージとしては、商品のマニュアルダウンロードと言えばわかりやすいでしょうか。
商品名をクリックすると指定のpdfファイルがDL出来るようにする物です。
ただ、ファイルが1000個程度になりそうなので指定のファイルをすぐ探し出すのは困難です。
そこで、そのページ上だけを検索してヒットした場所に移動するようにするにはどうしたら良いでしょうか?
いわゆるブラウザの「検索」機能ですが、出来るだけわかりやすいようにページ上での入力で表現したいと思います。
------------------------
□□□□□□□□　[検索]

商品名1　[Download]
商品名2　[Download]
商品名3　[Download]
～～
-------------------------
こんな感じです。

何か良い方法はありませんか?
お願いします。

回答No.2

steelgreen · ベストアンサー

<script language="JavaScript">
<!--
var Nsc4 = (document.layers);
var Ie4 = (document.all);

var win = this;
var n = 0;

function seek_str(str) {
var txt, i, found;
if (str == ""){
alert("なにか文字をいれてください。");
return false;
}
if (Nsc4) {
if (!win.find(str)){
while(win.find(str, false, true)){
n++;
}
}else{
n++;
}
if (n == 0){alert(str + " は見つかりませんでした。");}
}
if (Ie4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}else{
if (n > 0) {
n = 0;
seek_str(str);
}else{
alert(str + " は見つかりませんでした。");
}
}
}
return false;
}
//-->
</script>

以上でページ内検索ができるようになると思います。
ただし、Opera7.23ではリロードするだけで正常に
動作しません。Operaでは動作しないように、または
表示させないようにするスクリプトを追加する方が
いいでしょう。

実際にはブラウザの検索機能があるのでそれほど
気にすることはないと思いますが、ある程度
カテゴリ分けをしておくことやおいうえお順に
整理しておくなどするとよいと思います。

お礼

返答ありがとうございます。

多分、このページを見るのはIEのみなので(限られた人しか見ないため)多分これでいけそうです。

ありがとうございました。

回答No.1

yomo3

JavaScript(NN4～)ですが……。
findってえのがあります。
書式は
winName.find(strObj[,case[,bward]])
winName:ウィンドウ名（省略可能）
strObj:検索文字列
case:大文字／小文字区別（true=する、false=しない）
bward:検索方向（true=上に、false=下に）

方言がきついです。IEでは動かないでしょう。

その他の方法として、
商品名を配列に格納。
ページ上の商品リストにラベルをつける。
商品名とラベルの対応表を配列にする。
入力文字列で商品名配列を検索（これは逐一検索になるな）。
対応表配列からラベルを判定。
ラベルにジャンプ。

っていうのがあります。

お礼

返答ありがとうございました。

色々と条件があって難しそうですね。