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页面的代码如下所示..

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

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 个答案: