案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 自动完成（Autocomplete） - XML 数据</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
12
  </style>
13
  <script>
14
  $(function() {
15
    function log( message ) {
16
      $( "<div/>" ).text( message ).prependTo( "#log" );
17
      $( "#log" ).attr( "scrollTop", 0 );
18
    }
19
20
    $.ajax({
21
      url: "london.xml",
22
      dataType: "xml",
23
      success: function( xmlResponse ) {
24
        var data = $( "geoname", xmlResponse ).map(function() {
25
          return {
26
            value: $( "name", this ).text() + ", " +
27
              ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
28
            id: $( "geonameId", this ).text()
29
          };
30
        }).get();
31
        $( "#birds" ).autocomplete({
32
          source: data,
33
          minLength: 0,
34
          select: function( event, ui ) {
35
            log( ui.item ?
36
              "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
37
              "Nothing selected, input was " + this.value );
38
          }
39
        });
40
      }
41
    });
42
  });
43
  </script>
44
</head>
45
<body>
46
47
<div class="ui-widget">
48
  <label for="birds">London 匹配：</label>