0

通过 JQuery，我正在创建一些搜索功能，以便在单击搜索提交按钮时，代码应该执行以下操作：

  1. 将搜索字符串传递到变量中。
  2. 查找包含搜索字符串变量的任何部分元素并获取该部分的 ID 属性。
  3. 将不同页面的 url 加载到特定 div 中，该 url 以包含部分的 ID 为目标，以便 div 仅加载包含匹配字符串的部分，而不是整个 html 页面。这个其他 html 页面只是我域中的另一个页面。它包含一个带有几个部分元素的主体，每个部分元素都有一个唯一的 ID 和一些文本。它确实在其脚本标记中链接到 JQuery 文件。

我能够实现上述＃1，但我的代码中的＃2似乎存在问题，因为＃3加载永远不会发生。我添加了一个调试警报，当返回存储具有匹配字符串的部分的 foundId 变量时显示“未定义”。至于 url 本身的加载，这个 url 应该能够很好地加载到 div 中，就像我尝试加载整个 html 页面而不是匹配部分时一样，这是有效的。我确实想为此使用 load() 而不是 append() 。

感谢你们中可爱的人是否能以我的方式指出错误：

主.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>

查询：

$(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

问题是foundId = $('section:contains('+query+')').attr('id');不会返回任何东西，因为section元素不存在于main.html

尝试

$(document).ready(function() {
    $('#search-submit').click(function(e){
        var query = $("#search-box").val();;
        e.preventDefault();

        if (query.length > 0) {
            $.get('info.html', function(html){
                var $html = $(html);
                $("#info_display").empty().append($html.find('section:contains('+query+')').first())
            }, 'html')
        }
        else {
            alert("Oops, you forgot to enter a search term.");
        }
    });
});
于 2013-08-06T03:41:39.773 回答
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 回答