【最大10000ポイント】当たる!!質問投稿キャンペーン!

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<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では動作しないように、または
表示させないようにするスクリプトを追加する方が
いいでしょう。

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

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

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

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

お礼日時:2004/01/11 21:35

JavaScript(NN4~)ですが……。


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

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

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

っていうのがあります。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2004/01/11 21:33

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qホームページ内検索をフォームとJavaScriptで実現したい。

簡単なホームページを作っているのですが、例えばページ内の特定のテキストを検索する場合は
Ctrl+Fで検索できますが、自分で作っているページなので、FORMとJavaScriptを使って
キーワードを formのテキストに入力し、検索ボタンを押すと、1つめのfind位置にジャンプし、
ページ内のキーワード全てに黄色の反転をさせたいのですが、可能でしょうか?
DOM?というものを詳しく知る必要があると思いますが、お勧めの書籍がありましたら教えてください。

Aベストアンサー

DOMか何かはわかりません。
ここに↓
http://mist.freespace.jp/kumisuke/bookmarklet.html
Bookmarklet という,ブラウザの「お気に入り」に登録して利用するJavaScriptが紹介されているのですが,
このページの真ん中あたりにに
「ページ内の指定テキストを強調表示(タグを壊さずそこそこ速いハイライト検索) 」
というBookmarkletがあります。

これをJavaScriptに逆輸入して,以下のようなものを作ったら,
「ページ内の指定テキストを強調表示(タグを壊さずそこそこ速いハイライト検索) 」
がボタンでできました。

-------------------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>検索</title>
</head>

<body>
<p><INPUT type="button" value="ページ内検索"
onclick="javascript:(function(){ var d = document.body, e = prompt(&quot;&quot;, &quot;&quot;); d.innerHTML = d.innerHTML.replace(RegExp(&quot;&gt;[^&lt;]*(?:&quot;+e+&quot;)[^&lt;]*&lt;&quot;, &quot;ig&quot;),function(a){ return a.replace(RegExp(e, &quot;ig&quot;), '&lt;span style=&quot;color:Black;background:Yellow;&quot;&gt;$&amp;&lt;/span&gt;'); }); })()"></p>
<p>あいうえお<br>
かきくけこ<br>
さしすせそ</p>
</body>
</html>
------------------------------------

javascript:(function ~~ の部分は改行されているように見えますが一行です。

DOMか何かはわかりません。
ここに↓
http://mist.freespace.jp/kumisuke/bookmarklet.html
Bookmarklet という,ブラウザの「お気に入り」に登録して利用するJavaScriptが紹介されているのですが,
このページの真ん中あたりにに
「ページ内の指定テキストを強調表示(タグを壊さずそこそこ速いハイライト検索) 」
というBookmarkletがあります。

これをJavaScriptに逆輸入して,以下のようなものを作ったら,
「ページ内の指定テキストを強調表示(タグを壊さずそこそこ速いハイライト検索) 」
がボタン...続きを読む

QCtrl+F(検索)の窓を出したいのですが。

修行中のものです。自分のサイトをもっているのですがプラウザの Ctrl+F を知らない人がおおいいらしいのでページの頭のほうに Ctrl+F(検索)の窓を出すか、ボタンをくりっくするとCtrl+F(検索)を たちあがらせたいんですが、ご教授ください。

Aベストアンサー

<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=s-jis">
<SCRIPT>
var ft;
function fnCallDialog(){
var oDialog = "search_dialog.htm";
ft = document.body.createTextRange();
dWin = showModelessDialog(oDialog,window,"status:no;dialogWidth:450px;dialogHeight:150px");
}
function text1_onchange() {
var c;
ft.expand("word");
if( !ft.findText(text1.value) ){
ft.moveToPoint(0,0);
ft.findText(text1.value);
return;}
ft.select();
ft.queryCommandValue("ForeColor","highlight");
ft.moveStart("word");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>InternetExplorer4の頃には
Find()があったみたい。<BR>現在は出来なくなったようです。<BR>でもこの機能はIE5(5.5?)ではDHTMLで可能のようです。
<BR>とりあえず作ってみたので試してね。 </P>
<P>mudmasaさんがその気になればそっくりな「検索」ダイログができるでしょう。<BR>ファイトーー!( ゜ロ゜)乂(゜ロ゜ )イッパーーツ!!</P>
<P><INPUT id=text1 style="DISPLAY: none"></P>
<P>
<INPUT id=button1 type=button value=このページを検索 name=button1 LANGUAGE=javascript onclick="return fnCallDialog()"></P>
<P></P>
<P></P>
<P></P>
<P>「このページの検索」ボタンをクリックすると</P>
<P>「編集」→「このページを検索」<BR>または、「CTRL」+「F」と似たようなダイアログが出てきます。</P>
<P>テスト用文字列です。</P>
<P>あいうえお</P>
<P>かきくけこ</P>
<P>さしすせそ</P>
<P>あいうえお</P>
<P>かきくけこ</P>
<P>さしすせそ</P></BODY></HTML>

---search_dialog.htm---
<HTML>
<TITLE>偽検索</TITLE>
<SCRIPT>
function window.onunload()
{
dialogArguments.dWin=null;
}
</SCRIPT>
<BODY bgColor=silver >
<BR>
<TABLE cellSpacing=1 cellPadding=1 width="400" border=0>
<TR>
<TD width=300>検索する文字列 <INPUT id=ip1 size="18" style="WIDTH: 143px; HEIGHT: 22px"></TD>
<TD width=100>
<INPUT onclick=dialogArguments.text1.value=ip1.value;dialogArguments.text1_onchange(); type=button size=30 value=次を検索 id=button1 name=button1 style="WIDTH: 100px; POSITION: relative; HEIGHT: 24px"></TD></TR>
<TR>
<TD width=300>
</TD>
<TD width=100><INPUT onclick=window.close(); type=button value=" キャンセル " id=button1 name=button1 WIDTH="100" HEIGHT="24" size=19 style="WIDTH: 100px; POSITION: relative; HEIGHT: 24px"></TD></TR></TABLE>
</BODY>
</HTML>

<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=s-jis">
<SCRIPT>
var ft;
function fnCallDialog(){
var oDialog = "search_dialog.htm";
ft = document.body.createTextRange();
dWin = showModelessDialog(oDialog,window,"status:no;dialogWidth:450px;dialogHeight:150px");
}
function text1_onchange() {
var c;
ft.expand("word");
if( !ft.findText(text1.value) ){
ft.moveToPoint(0,0);
ft.findText(text1.value);
return;}
...続きを読む

Q検索ボックスの作り方

webサイトを作っています。

検索ボックスはhtmlとCSSだけで稼働するものでしょうか。

Aベストアンサー

はじめまして。

ボックス自体はデザインできますが、機能させるのはムリだったかと。
http://www.tohoho-web.com/wwwsrch.htm
参考まで。

Q同一ページ内で、任意の文字列検索→検索にヒットした
  • 要素を表示(それ以外は非表示)させる方法
  • 表題の通りなのですが、javascriptなどで実現可能でしょうか?

    http://g5187066.k-free.net/
    【ソース】
    <body>
     <div>
      <input type="text">
      <input type="submit" value="検索">
     </div>
     <ul>
      <li>あいうえお</li>
      <li>かきくけこ</li>
      <li>さしすせそ</li>
      <li>たちつていうえと</li>
      <li>なにぬねの</li>
     </ul>
    </body>

    上記のようなhtmlページがあり、例えば
    「いうえ」とフォームから検索したら1番目の<li>要素と4番目の<li>要素が表示され、そのほかの<li>要素は hidden になるようなイメージです。

    ヒットする文字列を含む<li>要素以外にjavascriptでクラスを付与させ、そのクラスのスタイルに display:none; などのスタイルを当てることで実現できそうな気はするのですが、どう書けばよいのか全然わからず、もしもご存知の方がいらっしゃいましたらご教授いただければ非常に助かります…

    もしくは上記のようなことが実現できるjqueryのプラグインなどが存在するのであればこちらもご教授いただければ非常に助かります…

    結構探したのですが見つかりませんでした。。(>_<)

    表題の通りなのですが、javascriptなどで実現可能でしょうか?

    http://g5187066.k-free.net/
    【ソース】
    <body>
     <div>
      <input type="text">
      <input type="submit" value="検索">
     </div>
     <ul>
      <li>あいうえお</li>
      <li>かきくけこ</li>
      <li>さしすせそ</li>
      <li>たちつていうえと</li>
      <li>なにぬねの</li>
     </ul>
    </body>

    上記のようなhtmlページがあり、例えば
    「いうえ」とフォームから検索したら1番目の<li>要素と4番目の<li>要素が表示され、その...続きを読む

    Aベストアンサー

    エンターはsubmitですからねぇ・・・
    trimなど一部仕様外を含めバグっていたのをなおして
    こんな感じでどうでしょうか?

    <style>
    li.hide{display:none;}
    </style>
    <script>
    try{
    document.addEventListener('keypress',function(e){pressfunc(e)},true);
    }catch(e){
    document.attachEvent('onkeypress',function(e){pressfunc(e)});
    }
    function pressfunc(e){
    var t = (e.srcElement || e.target);
    if(e.keyCode==13 && t.name=="keyword"){
    searchword();
    if(e.preventDefault){
    e.preventDefault();
    }else{
    e.returnValue=false;
    }
    }
    }
    function searchword(){
    var v=document.getElementById("keyword").value;
    var n1=document.getElementById("wordlist");
    var n2=n1.getElementsByTagName("li");
    for(var i=0;i<n2.length;i++){
    var cn=n2[i].className;
    cn=cn.replace(/(^|\s)hide(\s|$)/,"");
    if(! n2[i].innerHTML.match(new RegExp(v))){
    n2[i].className=(cn+(cn==""?"":" ")+"hide");
    }else{
    n2[i].className=cn;
    }
    }
    }
    </script>
    <form>
    <input type="text" name="keyword" id="keyword" value="いうえ">
    <input type="button" value="検索" onclick="searchword()">
    </form>
    <ul id="wordlist">
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
    <li>たちつていうえと</li>
    <li>なにぬねの</li>
    </ul>

    エンターはsubmitですからねぇ・・・
    trimなど一部仕様外を含めバグっていたのをなおして
    こんな感じでどうでしょうか?

    <style>
    li.hide{display:none;}
    </style>
    <script>
    try{
    document.addEventListener('keypress',function(e){pressfunc(e)},true);
    }catch(e){
    document.attachEvent('onkeypress',function(e){pressfunc(e)});
    }
    function pressfunc(e){
    var t = (e.srcElement || e.target);
    if(e.keyCode==13 && t.name=="keyword"){
    searchword();
    if(e.preventDefault){
    e.preve...続きを読む

    Qサイト内にページ内検索の設置方法

    現在のHPにサイト内検索の機能を追加したいと考えています。簡単に設置出来る方法をご存じでしたら教えていただけないでしょうか?よろしくお願いします。

    Aベストアンサー

    大きく分けて、

    1,検索ポータルサイトのサイト内検索サービスを使用する。(Goo、Googleなど)

    2,CGIプログラムを使用する。

    3,インデックス型の検索エンジンを導入する。

    簡単さを求めるならば1でしょうか。
    http://tohoho.wakusei.ne.jp/www.htm
    のサイトに検索フォームの解説があるので一読してみてはいかがでしょうか。

    Qフォーム上で押されたボタンによってサーブレットの処理を変えたい

    Urizakaです。
    さて、さっそく質問です。
    JSPの同一フォーム上に「登録」「修正」「削除」のボタンを置き、その押された
    ボタンによってサーブレット内での処理が切り替わる(具体的には、違う
    SQL文を実行し、違うJSPページをgetRequestDispatcherメソッドで生成
    する)ようにしたいのですが、どのようにすればよいのでしょうか?
    もちろんそれぞれの処理に対して別々のサーブレットを作り、javaScript
    でそれぞれのサーブレットへ飛ぶように制御するという処理も考えたことは
    考えたのですが、できれば一つのサーブレットで済ませたいと考えたもので
    …宜しくお願いします。

    Aベストアンサー

    お恥ずかしい限りです。
    前述の例、動くわけがありませんね(汗)

    2つめの例、書きなおします。

    ---------------------------------------------------

    ■JSPのフォーム

    <form name=MyForm action="<<サーブレットのURL>>" method=post>
    <input type=button name=MyClick value=登録 onClick="func('Toroku');">
    <input type=button name=MyClick value=修正 onClick="func('Shusei');">
    <input type=button name=MyClick value=削除 onClick="func('Sakujo');">
    <input type=hidden name=MySubmit>
    </form>

    <script language="JavaScript">
    function func(MyCommand){
    document.MyForm.MySubmit.value=MyCommand;
    document.MyForm.submit();
    }
    </script>

    ■Servletでの処理
    // リクエストの取得
    String MyAction = req.getParameter("MySubmit");

    // 処理の実行
    if (MyAction.equals("Toroku")){...}
    if (MyAction.equals("Shusei")){...}
    if (MyAction.equals("Sakujo")){...}



    ---------------------------------------------------

    こんな感じでどうでしょうか。
    ちなみにこうやって書いておくと、フォームのボタンからじゃなくても
    アンカーをクリックすることで同じ効果が出せそうな……

    <a href="JavaScript:func('Toroku')">登録</a>

    あ、でもまたボロが出そうなのでこの辺で(^_^;)

    お恥ずかしい限りです。
    前述の例、動くわけがありませんね(汗)

    2つめの例、書きなおします。

    ---------------------------------------------------

    ■JSPのフォーム

    <form name=MyForm action="<<サーブレットのURL>>" method=post>
    <input type=button name=MyClick value=登録 onClick="func('Toroku');">
    <input type=button name=MyClick value=修正 onClick="func('Shusei');">
    <input type=button name=MyClick value=削除 onClick="func('Sakujo');">
    <input type=hidden name=M...続きを読む

    Qテーブル内の文字サイズを変更したい。

    HTMLのテーブル内の文字サイズを変更したいのですが。
    イマイチ上手くいかずに悩んでいます。
    出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
    <TD>タグや<TR>タグのところでいじくるのですか?

    Aベストアンサー

    いろいろやり方はありますが
    文字単位でサイズを変更するには
    #2の方法ですね。

    テーブルごとやセル(<TD>)ごとにサイズを変更するには
    スタイルシート(CSS)を使用します。

    テーブルごとにサイズを変更する場合
    <TABLE style="font-size : 20px;">

    セル(<TD>)ごとにサイズを変更する場合
    <TD style="font-size : 20px;">あああ</TD>

    #1の方法だとページ内の全てのセル(<TD>)に設定することになります。

    スタイルシート(CSS)はこれら以外にも
    いろいろな設定方法があります。

    Qphpにcssを適応させたいのですが?

    phpで出力させた結果をブラウズするのに、css指定させたいのですが?

    できるのでしょうか?

    Aベストアンサー

    PHPだから特別な考えはしなくて良いです

    PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

    つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
    又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

    例えば
    ---------------index.html(又はindex.php)のhead内
    <link rel="stylesheet" type="text/css" href="stylecss.php"/>
    ---------------

    ------------stylecss.php
    BODY {
    background-color: #<?php echo $background; ?>;
    margin: 0px;
    }

    A:link {
    color: #<?php echo $acollar; ?>;
    text-decoration:none;
    }
    -----------
    のようにしてしまって、CSSそのものを動的に生成することも可能です

    PHPだから特別な考えはしなくて良いです

    PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

    つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
    又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

    例えば
    ---------------index.html(又はindex.php)のhead内
    <link rel="stylesheet" type="text/css" href="stylecss.php"/>
    ---------------

    ------------stylecss.php
    BODY {
    background-color: #<?php echo $background; ?>;
    margin: 0px;
    ...続きを読む

    QHPに検索機能をつけるには

    こんにちは。

    HPB8を使ってHPを作成している者です。自分のHPに検索機能を
    つけたいのですが、どうすればよいか分かりません。求めているのは
    グーグルや楽天などではなく、自分のHP内だけの検索機能システムです。
    よく他のHPで見かけるのですが、これは何処かでレンタルなどをする
    必要があるのでしょうか?

    どなたか分かる方教えてください。

    Aベストアンサー

    ホームページ内全文検索エンジン msearch というのがあります。
    これはCGIというプログラムをサーバーにアップロードして使います。

    CGIのカウンターや掲示板などを設置したことがある方なら使えると思いますが、初心者の方には少しむずかしいかもしれません。

    参考URL:http://www.kiteya.net/script/msearch/

    Qテーブルセル余白(例えば左側だけ、上側だけ、など)

    こんにちは。
    宜しくお願いいたします。

    テーブル内のコードに、cellpadding="5" は
    セル余白が上下左右のすべて、5ピクセル空きますが、

    左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
    指定方向のみ、余白を作ることは可能でしょうか。

    その場合のHTML記述を教えてください。

    また、ここで質問させていただいている「指定方向への余白指定」と
    全体余白指定の「cellpadding="XX"」は同時に使って
    良いものでしょうか。
    素人質問ですみません。
    宜しくお願いいたします。

    Aベストアンサー

    1つのセルだけなら、下記で。
    <td style="padding: 5px 10px 20px 30px;">
    上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
    適当に数値変更してください。
    cellpadding="5" と style="padding: 5px;"は同じになるはず。
    <td style="padding: 5px;">

    両方使うとどうなるかは、試して下さい。
    cellpadding をここ数年利用していないので・・・

    複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
    <style type="text/css">
    <!--
    td {padding: 5px 10px 20px 30px;}
    -->
    </style>


    人気Q&Aランキング