如何根据搜索过滤xml数据？

Question

<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页面的代码如下。

结果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的信息

Answer 1

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

如何根据搜索过滤xml数据？

问题描述

1 个解决方案

解决方案1
0 2015-06-09 07:07:15

如何根据搜索过滤xml数据？

问题描述

1 个解决方案

解决方案1 0 2015-06-09 07:07:15

解决方案1
0 2015-06-09 07:07:15