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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Autocomplete - Categories</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-category {
  16                 font-weight: bold;
  17                 padding: .2em .4em;
  18                 margin: .8em 0 .2em;
  19                 line-height: 1.5;
  20         }
  21         </style>
  22         <script>
  23         $.widget( "custom.catcomplete", $.ui.autocomplete, {
  24                 _renderMenu: function( ul, items ) {
  25                         var that = this,
  26                                 currentCategory = "";
  27                         $.each( items, function( index, item ) {
  28                                 if ( item.category != currentCategory ) {
  29                                         ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
  30                                         currentCategory = item.category;
  31                                 }
  32                                 that._renderItemData( ul, item );
  33                         });
  34                 }
  35         });
  36         </script>
  37         <script>
  38         $(function() {
  39                 var data = [
  40                         { label: "anders", category: "" },
  41                         { label: "andreas", category: "" },
  42                         { label: "antal", category: "" },
  43                         { label: "annhhx10", category: "Products" },
  44                         { label: "annk K12", category: "Products" },
  45                         { label: "annttop C13", category: "Products" },
  46                         { label: "anders andersson", category: "People" },
  47                         { label: "andreas andersson", category: "People" },
  48                         { label: "andreas johnson", category: "People" }
  49                 ];
  50
  51                 $( "#search" ).catcomplete({
  52                         delay: 0,
  53                         source: data
  54                 });
  55         });
  56         </script>
  57 </head>
  58 <body>
  59
  60 <label for="search">Search: </label>
  61 <input id="search">
  62
  63 <div class="demo-description">
  64 <p>A categorized search result. Try typing "a" or "n".</p>
  65 </div>
  66 </body>
  67 </html>