Home/ Questions/Q 7879287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T03:52:05+00:00

I’m trying to realize an input field which shows suggestions while typing. I’ve found

  • 0

I’m trying to realize an input field which shows suggestions while typing. I’ve found the jquery autocomplete function, but I’m struggling with XML as data source coming from php. My php file creates an output like this.

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>

I’ve tried it with the link posted by Rory McCrossan.

My HTML now looks like this:

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

When I write something into the input field, and then clear it, it shows me 3 li’s below the input field (which is the amount of locations I have, according to the xml), but there’s no text being display next to them. What’s going wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, found a solution for myself (decided to create JSON output). Rory McCrossan’s example was nice, but from what I could see, it just loaded the xml once, and then searched within the xml. What I wanted was prefiltered output, so it wouldn’t transfer too much data.

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