通过xml文件搜索

时间:2019-06-18 11:14:27

标签: jquery html xml search hyperlink

我在检索脱机html站点上各个页面(以xml文件保存)并通过用户输入搜索栏的方式来检索超链接时遇到困难。 xml设置非常基本,仅包含每个页面位置中每个页面标题和href的列表。任何指针,不胜感激。

xml:structure=
<pages>
   <link>
       <title>Project</title>
       <href>projects.html</href>
   </link>
</pages>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type = "text/javascript">

  //Searchbar
  $(document).ready(function() {
    $("#searchbar").on("keyup", function() {
      $.ajax({
        type: "GET",
        url: "links.xml",
        dataType: "xml",
        success: xmlParser
      });
    });
  });

function xmlParser(xml) {
  var searchFor = $("#searchbar").val();
  var reg = new RegExp(searchFor, "i");
  $(xml).find("link").each(function() {
    var title = $(this).find("title").text();
    var titleSearch = title.search(reg);
    $("#xmloutput").empty();
    if (titleSearch > -1) {
      $("#xmloutput").append("<a href=" + $(this).find("url").text +">"+ searchFor.text + "</a>");
    }
  });

 </script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="container">
    <header></header>

    <!--searchbar-->
    <form id="searchform">
      <div class="searchbar">
        <input type="text" id="searchbar">
      </div>
    </form>
  </div>

  <div><a id="xmloutput"></a></div>

</body>

</html>

0 个答案:

没有答案