third-party/jquery-ui-1.10.2/demos/autocomplete/xml.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Autocomplete - XML data parsed once</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.position.js"></script>
  11         <script src="../../ui/jquery.ui.menu.js"></script>
  12         <script src="../../ui/jquery.ui.autocomplete.js"></script>
  13         <link rel="stylesheet" href="../demos.css">
  14         <style>
  15         .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
  16         </style>
  17         <script>
  18         $(function() {
  19                 function log( message ) {
  20                         $( "<div/>" ).text( message ).prependTo( "#log" );
  21                         $( "#log" ).attr( "scrollTop", 0 );
  22                 }
  23
  24                 $.ajax({
  25                         url: "london.xml",
  26                         dataType: "xml",
  27                         success: function( xmlResponse ) {
  28                                 var data = $( "geoname", xmlResponse ).map(function() {
  29                                         return {
  30                                                 value: $( "name", this ).text() + ", " +
  31                                                         ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
  32                                                 id: $( "geonameId", this ).text()
  33                                         };
  34                                 }).get();
  35                                 $( "#birds" ).autocomplete({
  36                                         source: data,
  37                                         minLength: 0,
  38                                         select: function( event, ui ) {
  39                                                 log( ui.item ?
  40                                                         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
  41                                                         "Nothing selected, input was " + this.value );
  42                                         }
  43                                 });
  44                         }
  45                 });
  46         });
  47         </script>
  48 </head>
  49 <body>
  50
  51 <div class="ui-widget">
  52         <label for="birds">London matches: </label>
  53         <input id="birds" />
  54 </div>
  55
  56 <div class="ui-widget" style="margin-top:2em; font-family:Arial">
  57         Result:
  58         <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  59 </div>
  60
  61 <div class="demo-description">
  62 <p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
  63 <p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
  64 </div>
  65 </body>
  66 </html>