案例：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-category {
12
    font-weight: bold;
13
    padding: .2em .4em;
14
    margin: .8em 0 .2em;
15
    line-height: 1.5;
16
  }
17
  </style>
18
  <script>
19
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
20
    _renderMenu: function( ul, items ) {
21
      var that = this,
22
        currentCategory = "";
23
      $.each( items, function( index, item ) {
24
        if ( item.category != currentCategory ) {
25
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
26
          currentCategory = item.category;
27
        }
28
        that._renderItemData( ul, item );
29
      });
30
    }
31
  });
32
  </script>
33
  <script>
34
  $(function() {
35
    var data = [
36
      { label: "anders", category: "" },
37
      { label: "andreas", category: "" },
38
      { label: "antal", category: "" },
39
      { label: "annhhx10", category: "Products" },
40
      { label: "annk K12", category: "Products" },
41
      { label: "annttop C13", category: "Products" },
42
      { label: "anders andersson", category: "People" },
43
      { label: "andreas andersson", category: "People" },
44
      { label: "andreas johnson", category: "People" }
45
    ];
46
47
    $( "#search" ).catcomplete({
48
      delay: 0,