如何根據搜索過濾xml數據？

<pages> 
    <link> 
     <title>HTML a tag</title> 
     <url>http://www.w3schools.com/tags/tag_a.asp</url> 
    </link> 
    <link> 
     <title>HTML br tag</title> 
     <url>http://www.w3schools.com/tags/tag_br.asp</url> 
    </link> 
    <link> 
     <title>CSS background Property</title> 
     <url>http://www.w3schools.com/cssref/css3_pr_background.asp</url> 
    </link> 
    <link> 
     <title>CSS border Property</title> 
     <url>http://www.w3schools.com/cssref/pr_border.asp</url> 
    </link> 
    <link> 
     <title>JavaScript Date Object</title> 
     <url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url> 
    </link> 
    <link> 
     <title>JavaScript Array Object</title> 
     <url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url> 
    </link> 
</pages>

這是我解析和如何根據搜索過濾xml數據？

SEARCH.HTML

<!DOCTYPE html> 
<html> 
<head> 
<link 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 

<script> 
    $(document).ready(function() { 
     var myArr = []; 

     $.ajax({ 
      type: "GET", 
      url: "http://localhost/category/links.xml", 
      dataType: "xml", 
      success: parseXml, 
      complete: setupAC, 
      failure: function (data) { 
       alert("XML File could not be found"); 
      } 
     }); 

     function parseXml(xml) { 
      //find every query value 
      $(xml).find("link").each(function() { 
       myArr.push($(this).find('title').text()); 
      }); 
     } 

     function setupAC() { 
      $("input#searchBox").autocomplete({ 
       source: myArr, 
       minLength: 3, 
       select: function (event, ui) { 
        $("input#searchBox").val(ui.item.value); 
        $("#searchForm").submit(); 
       } 
      }); 
     } 
    }); 
</script> 
</head> 

    <body style="font-size: 62.5%;"> 

     <form name="search_form" id="searchForm" method="GET" action="http://localhost/search_result1.html"> 
      <label for="searchBox">Keyword Search</label> 
      <input type="text" id="searchBox" name="searchString" /> 

      <button name="searchKeyword" id="searchKeyword">Sumbit</button> 
     </form> 

    </body> 
</html>

，並自動完成功能這是我的搜索欄獲得輸出樣本XML數據。在它中，我首先解析上面的XML，然後將標題存儲在一個數組中，我可以使用它來實現自動完成功能。並點擊提交我重定向頁面到另一個HTML頁面，我顯示所有的結果。

第二html頁面的代碼下面給出..

RESULT.HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="1.7.2.jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $("#dvContent").append("<div></div>"); 
      $.ajax({ 
       type: "GET", 
       url: "http://localhost/category/link.xml", 
       dataType: "xml", 
       success: function (xml) { 
        $(xml).find('link').each(function() { 
         var stitle = $(this).find('title').text(); 
         var surl = $(this).find('url').text(); 
         $("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div"); 
        }); 
       }, 
       error: function() { 
        alert("An error occurred while processing XML file."); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="dvContent"> 
     </div> 
    </form> 
</body> 
</html>

，但我想要的是顯示搜索詞的只有標題和網址。在這我得到整個XML作爲輸出。因此，我可以通過這種方式只顯示搜索詞的標題和網址。

這是我得到result.html輸出作爲

. HTML a tag, http://www.w3schools.com/tags/tag_a.asp 
. HTML br tag, http://www.w3schools.com/tags/tag_br.asp

在search.html搜索搜索術語HTML

來源

2015-06-09 Stephen Rodriguez

我看不到你在哪裏得到results.html頁面中的搜索表單輸入值。如果你想過濾結果，你將需要這個值，並使用它從源XML過濾。 – Zhertal

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="1.7.2.jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $("#dvContent").append("<div></div>"); 
      var searchValue = $('#searchBox').val(); // Here you get the search text 
      $.ajax({ 
       type: "GET", 
       url: "http://localhost/category/link.xml", 
       dataType: "xml", 
       success: function (xml) { 
        $(xml).find('link').each(function() { 
         var stitle = $(this).find('title').text(); 
         var surl = $(this).find('url').text(); 
         if (searchValue === stitle) { // Only append those if search text matches with title 
          $("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div"); 
         } 
        }); 
       }, 
       error: function() { 
        alert("An error occurred while processing XML file."); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="dvContent"> 
     </div> 
    </form> 
</body> 
</html>

來源

2015-06-09 07:07:15 ozil

但我無法獲得** searchValue ** ..它是未定義的 –

@Stephen Rodriguez控制檯上的錯誤是什麼？ – ozil

沒有任何錯誤..所以我試着給出一個警報，並檢查存儲在searchValue中的值，並將警報返回undefined –

如何根據搜索過濾xml數據？

回答

相關問題