Question

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

Answer 1

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

Answer 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");
            }
        })
    })

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

2 个答案: