案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 自动完成（Autocomplete） - 远程缓存</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 {
12
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
13
  }
14
  </style>
15
  <script>
16
  $(function() {
17
    var cache = {};
18
    $( "#birds" ).autocomplete({
19
      minLength: 2,
20
      source: function( request, response ) {
21
        var term = request.term;
22
        if ( term in cache ) {
23
          response( cache[ term ] );
24
          return;
25
        }
26
27
        $.getJSON( "/try/jqueryui/search.php", request, function( data, status, xhr ) {
28
          cache[ term ] = data;
29
          response( data );
30
        });
31
      }
32
    });
33
  });
34
  </script>
35
</head>
36
<body>
37
38
<div class="ui-widget">
39
  <label for="birds">鸟：</label>
40
  <input id="birds">
41
</div>
42
43
44
</body>
45
</html>