-1

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

4

2 回答 2

1

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

于 2012-05-03T09:12:08.930 回答
0

好的，为自己找到了一个解决方案（决定创建 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");
            }
        })
    })
于 2012-05-04T10:53:51.037 回答