project/media/jquery-autocomplete/demo/json.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4
   5 <title>jQuery Autocomplete Plugin</title>
   6 <script type="text/javascript" src="../lib/jquery.js"></script>
   7 <script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
   8 <script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
   9 <script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
  10 <script type='text/javascript' src='../jquery.autocomplete.js'></script>
  11 <script type='text/javascript' src='localdata.js'></script>
  12 <link rel="stylesheet" type="text/css" href="main.css" />
  13 <link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
  14 <link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
  15
  16 <script type="text/javascript">
  17 $(function() {
  18         function format(mail) {
  19                 return mail.name + " &lt;" + mail.to + "&gt";
  20         }
  21         $("#email").autocomplete('emails.php', {
  22                 multiple: true,
  23                 dataType: "json",
  24                 parse: function(data) {
  25                         return $.map(data, function(row) {
  26                                 return {
  27                                         data: row,
  28                                         value: row.name,
  29                                         result: row.name + " <" + row.to + ">"
  30                                 }
  31                         });
  32                 },
  33                 formatItem: function(item) {
  34                         return format(item);
  35                 }
  36         }).result(function(e, item) {
  37                 $("#content").append("<p>selected " + format(item) + "</p>");
  38         });
  39 });
  40 </script>
  41
  42 </head>
  43
  44 <body>
  45
  46 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
  47
  48 <div id="content">
  49
  50         <form autocomplete="off">
  51                 <p>
  52                         <label>E-Mail (remote json):</label>
  53                         <textarea cols="120" id="email"></textarea>
  54                 </p>
  55
  56                 <input type="submit" value="Submit" />
  57         </form>
  58
  59         <a href="emails.phps">Server-side script creating the JSON data</a>
  60
  61 </div>
  62 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  63 </script>
  64 <script type="text/javascript">
  65 _uacct = "UA-2623402-1";
  66 urchinTracker();
  67 </script>
  68 </body>
  69 </html>