使用php输出xml作为数据源的自动完成答案

【问题标题】：Autocomplete with php outputting xml as data source使用php输出xml作为数据源的自动完成
【发布时间】：2012-05-03 09:06:58
【问题描述】：

我正在尝试实现一个在输入时显示建议的输入字段。我找到了 jquery 自动完成功能，但我正在努力将 XML 作为来自 php 的数据源。我的 php 文件会创建这样的输出。

XML：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<locations>
    <location>
        <number>600</number>
        <name>Location Name 600</name>
    </location>

    <location>
        <number>698</number>
        <name>Location Name 698</name>
    </location>

    <location>
        <number>1110</number>
        <name>Location Name 1110</name>
    </location>
</locations>

我已经使用 Rory McCrossan 发布的链接进行了尝试。

我的 HTML 现在看起来像这样：

    <!DOCTYPE HTML>
<head>
    <title>Autocomplete</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#output" );
            $( "#output" ).scrollTop( 0 );
        }

        $.ajax({
            url: "api.php",
            dataType: "xml",
            success: function(xmlResponse) {
                var data = $("location", xmlResponse).map(function() {
                    return {
                        name: $("name", this).text(),
                        number: $("number", this).text()
                    };
                }).get();

                $("#locations").autocomplete({
                    source: data,
                    minLength: 0,
                    select: function( event, ui ) {
                        log( ui.item ?
                            "Selected: " + ui.item.name + ", number: " + ui.item.number :
                            "Nothing selected, input was " + this.value );
                    }
                });
            }
        });
    });
    </script>
</head>

<body style="background-color: black; color: white;">

<input id="locations" />

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="output" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</body>
</html>

当我在输入字段中写入内容，然后将其清除时，它会在输入字段下方显示 3 li（根据 xml，这是我拥有的位置数量），但旁边没有显示文本他们。怎么了？

【问题讨论】：

标签： php jquery xml autocomplete

【解决方案1】：

要将 XML 与 autoComplete 结合使用，请参见此处的示例：http://jqueryui.com/demos/autocomplete/xml.html

【讨论】：

这是否也适用于 url: "api.php" 而不是 xml 文件？
可以，只要您包含 dataType: "xml" 设置以将预期格式显式设置为 XML。
自动完成方法有点问题，请参阅开篇文章。
你是否包含了 jqueryui.js？
糟糕，我的错。现在包括用户界面，消息消失了，但仍然没有自动完成。

【解决方案2】：

好的，为自己找到了解决方案（决定创建 JSON 输出）。 Rory McCrossan 的示例很好，但据我所见，它只加载了一次 xml，然后在 xml 中搜索。我想要的是预过滤的输出，所以它不会传输太多数据。

$(function() {
        $("#locations").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "api.php",
                    dataType: "jsonp", 
                    data: {
                        location: request.term
                    },
                    success: function(data) {
                        response($.map(data.locations, function(item) {
                            return {
                                label: item.name,
                                value: item.nummer
                            }
                        })); 
                    }
                });
            },
            minLength: 0,
            select: function(event, ui) {
                $("<div/>").text(ui.item.label + " " + ui.item.value).prependTo("#output");
            }
        })
    })

【讨论】：