Autocompletar con php generando xml como fuente de datos

Estoy tratando de realizar un campo de entrada que muestre sugerencias mientras escribo. Encontré la función de autocompletar jquery, pero tengo problemas con XML como fuente de datos proveniente de php. Mi archivo php crea una salida como esta.

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>

Lo probé con el enlace publicado por Rory McCrossan.

Mi HTML ahora se ve así:

    <!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>

Cuando escribo algo en el campo de entrada y luego lo borro, me muestra 3 li debajo del campo de entrada (que es la cantidad de ubicaciones que tengo, según el xml), pero no se muestra texto junto a ellos. ¿Qué está yendo mal?

preguntado el 03 de mayo de 12 a las 10:05

2 Respuestas

Para usar XML con autocompletar, vea el ejemplo aquí: http://jqueryui.com/demos/autocomplete/xml.html

contestado el 03 de mayo de 12 a las 10:05

¿Funcionará esto también con url: "api.php" en lugar de un archivo xml? - Ahatius

Sí, siempre y cuando incluyas el dataType: "xml" configuración para establecer explícitamente el formato esperado en XML. - Rory McCrossan

Si tiene un pequeño problema con el método de autocompletar, vea la publicación de apertura. - Ahatius

¿Has incluido jqueryui.js? - Rory McCrossan

Ups, mala mía. Incluida la interfaz de usuario ahora, el mensaje se ha ido, pero aún no se completa automáticamente. - Ahatius

Ok, encontré una solución para mí (decidí crear una salida JSON). El ejemplo de Rory McCrossan fue bueno, pero por lo que pude ver, solo cargó el xml una vez y luego buscó dentro del xml. Lo que quería era una salida prefiltrada, para que no transfiriera demasiados datos.

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

contestado el 04 de mayo de 12 a las 11:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.