0

JQueryを使用して、検索送信ボタンをクリックするとコードが次のことを行うように、いくつかの検索機能を作成しています。

  1. 検索文字列を変数に渡します。
  2. 検索文字列変数を含むセクション要素を見つけて、そのセクションの ID 属性を取得します。
  3. 特定の div に別のページの URL をロードします。これは、含まれているセクションの ID を対象としています。これにより、div は、html ページ全体ではなく、一致する文字列を含むセクションのみをロードします。この他の HTML ページは、私のドメインにある別のページです。それぞれに一意の ID といくつかのテキストを持ついくつかのセクション要素を持つ本文が含まれています。script タグで JQuery ファイルにリンクしています。

上記の #1 を達成することができますが、#3 の読み込みが発生しないため、コードの #2 に問題があるようです。一致する文字列を持つセクションを格納する foundId 変数を返すときに「未定義」を表示するデバッグ用のアラートを追加しました。URL自体の読み込みに関しては、一致するセクションだけでなくhtmlページ全体を読み込もうとしたときと同じように、このURLはdivにうまく読み込まれるはずです。これには、append() の代わりに load() を使用したいと思います。

素敵な人が私の方法でエラーを指摘できるかどうかに感謝します:

main.html:

<div id="wrap">
  <form action="#" id="search-form" method="get">
    <fieldset>
      <input type="search" id="search-box" name="search" value=""/>
      <input type="submit" id="search-submit" value="Show me"/>                 
    </fieldset>
  </form>
  <div id="info_display"></div>
</div>

info.html のサンプル スニペット (main.html の div にロードする必要があるセカンダリ ページ)

 <body>
    <section id="content-good">
      <header>Good Thing</header>
      <p>Description of thing</p>
    </section>
    <section id="content-great">
       <header>Great Thing</header>
       <p>Description of thing</p>
    </section>
    <section id="content-best">
       <header>Best Thing</header>
       <p>Description of thing</p>
    </section>
 </body>

JQuery:

$(document).ready(function() {
     var query;
     var foundId;
      $('#search-submit').click(function(e){
          e.preventDefault();
          query = $("#search-box").val();
          if (query.length > 0) {
            foundId = $('section:contains('+query+')').attr('id');
            $("#info_display").load('info.html #' + foundId);
          }
          else {
            alert("Oops, you forgot to enter a search term.");
          }
      });
});

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

4

2 に答える 2

0

以下のコードはトリックを行いました：

 $('#search-submit').click(function(e){
    var query = $("#search-box").val();
    e.preventDefault();
    if (query.length > 0) {
        $.get('info.html', function(html){
        var $html = $(html);
        var $match = $html.find(':contains('+query+')').parent('section');
            if ($match.length > 0) {
            $("#info_display").empty().append($match);
            }
            else {
                $("#info_display").empty().append('<p>No result was found!</p>');
            }
        }, 'html');
    }
    else {
    $("#info_display").empty().append('<p>Oops, you forgot to enter a search term.</p>');
    }
});
于 2013-08-06T23:26:29.340 に答える