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:\[code\]<?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>\[/code\]I've tried it with the link posted by Rory McCrossan.My HTML now looks like this:\[code\] <!DOCTYPE HTML><head> <title>Autocomplete</title> <script type="text/javascript" src="http://stackoverflow.com/questions/10428258/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/10428258/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 = http://stackoverflow.com/questions/10428258/$("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>\[/code\]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?
Autocomplete with php outputting xml as data source
- Thread starter QCEdward
- Start date