使用 php 输出 xml 作为数据源的自动完成 - Autocomplete with php outputting xml as data source

Autocomplete with php outputting xml as data source

本文关键字：数据源 php 输出 xml 使用 | 更新日期: 2023-09-27

我正在尝试实现一个在键入时显示建议的输入字段。我找到了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 是我拥有的位置数量），但它们旁边没有显示文本。出了什么问题？

要将 XML 与自动完成一起使用，请参阅此处的示例：http://jqueryui.com/demos/autocomplete/xml.html

好的，为自己找到了一个解决方案（决定创建 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");
            }
        })
    })