如何根据搜索过滤xml数据

How to filter xml data according to the search?

本文关键字：xml 数据 过滤 搜索 何根      更新时间：2023-09-26
<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，然后将标题存储在一个数组中，我可以使用它来自动完成功能。在点击提交时，我将页面重定向到另一个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>

，但我想要的是只显示搜索词的标题和url。在这个我得到整个xml作为输出。所以在有一种方式，我可以只显示标题和url的搜索项。

也就是我在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
<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>
相关文章：