使用 xml 文件制作自动完成脚本时出现问题

Question

我正在尝试对我的站点进行站点搜索，以便用户可以通过键入一些词来搜索某些页面，并将他们重定向到 myDomain 的相应 url。我正在尝试为我使用 xml 文件的帮助而不是 mysql 数据库来实现快速自动完成。我已将我网页的所有标题和相应的 url 放入该 xml 文件中。以下是我的一段代码。

我的HTML代码：

<html>
<head>
<title>..</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
    $(document).ready(function() {
        var myArr = [];

        $.ajax({
            type: "GET",
            url: "categories.xml", // change to full path of file on server
            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("category").each(function()
            {
                myArr.push($(this).attr("label"), $(this).attr("url"));

            }); 
        }

        function setupAC() {
            $("input#searchBox").autocomplete({
                    source: myArr,
                    minLength: 2,
                    select: function(event, ui) {
                        $("input#searchBox").val(ui.item.value);
                        window.location = ui.item.value


                    }
            });
        }
    });
</script>

<!-- Code for Search Box -->

<div id="header-search">
 <span class="font-select">
  <b>Search Page by Typing few charaters:</b>
    <form name="search_form" id="searchForm" method="GET" action="#">
    <input type="text"  id="searchBox" name="searchString" placeholder="Type category to search.."/>
    </form>
    </span>     
    </div>
....
</body>
</html>

下面是我的 XML 文件 "categories.xml" 的内容：

<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category label="AC and Refrigeration" url="url_1.php" />
<category label="Advertising Agencies"  url="url_2.php" />
<category label="Aluminum and Fabricator" url="url_3.php" />
<category label="Architects" url="url_4.php" />
<category label="Arm and Ammunition" url="url_5.php" />
<category label="Acupressure and Acupuncture Clinic" url="url_6.php" />
<category label="Astrologers" url="url_7.php" />
<category label="ATM Booths" url="url_8.php" />
<category label="Auto Agency" url="url_9.php" />
</categories>

现在，通过使用上面的代码片段和 xml 文件，我的自动完成功能工作得很好，即如果我输入类别标签的几个字符（在 xml 文件中提到），它在搜索框中向我显示 select 的自动完成选项。

但问题是，当我最终 select 任何一个选项时，它都会将我重定向到 url，这是在搜索框中 select 编辑的同一个词 i.e.the xml 文件中的类别标签词，但我想将其重定向到相应的 url 到 xml 文件中 url 的值。

例如如果我 select 编辑了第一个选项 "AC and Refrigeration"，它目前正在将我重定向到 url "myDomain.com/AC and Refrigeration" 但我希望它应该将我重定向到相应的 url 值xml 文件即 "myDomain.com/url_1.php" 。所以请查看这段代码并帮助我实现这一点，因为我已经尝试了很多东西但无法实现这一点，我在脚本或其他地方的 "window.location = ui.item.value" 附近遗漏了一些小东西。提前致谢 - 请帮我修改或添加我的代码。请帮忙....

Answer 1

使用 myArr.push($(this).attr("label"), $(this).attr("url"))，您将 label 和 url 作为数组的元素推入 myArr。（如果您在输入中输入 url，它将 return url_1.php ...）。
您需要添加一个包含标签和 url 的对象：

myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});

然后您可以使用 ui.item.label 和 ui.item.url 访问项目值，您的重定向将如下所示：

$("input#searchBox").val(ui.item.url);
window.location = ui.item.url

使用 xml 文件制作自动完成脚本时出现问题

Issue with making autocomplete script with xml file

jquery

xml

autocomplete

url-redirection