plugins/Autocomplete/jquery-autocomplete/demo/index.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>\r
  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 $().ready(function() {
  18
  19         function findValueCallback(event, data, formatted) {\r
  20                 $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
  21         }
  22
  23         function formatItem(row) {
  24                 return row[0] + " (<strong>id: " + row[1] + "</strong>)";
  25         }
  26         function formatResult(row) {
  27                 return row[0].replace(/(<.+?>)/gi, '');
  28         }
  29
  30         $("#suggest1").autocomplete(cities);
  31         $("#month").autocomplete(months, {
  32                 minChars: 0,
  33                 max: 12,
  34                 autoFill: true,
  35                 mustMatch: true,
  36                 matchContains: false,
  37                 scrollHeight: 220,
  38                 formatItem: function(data, i, total) {
  39                         // don't show the current month in the list of values (for whatever reason)
  40                         if ( data[0] == months[new Date().getMonth()] )
  41                                 return false;
  42                         return data[0];
  43                 }
  44         });
  45         $("#suggest13").autocomplete(emails, {
  46                 minChars: 0,
  47                 width: 310,\r
  48                 matchContains: true,
  49                 autoFill: false,
  50                 formatItem: function(row, i, max) {
  51                         return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
  52                 },
  53                 formatMatch: function(row, i, max) {
  54                         return row.name + " " + row.to;
  55                 },
  56                 formatResult: function(row) {
  57                         return row.to;
  58                 }
  59         });\r
  60         $("#singleBirdRemote").autocomplete("search.php", {\r
  61                 width: 260,\r
  62                 selectFirst: false\r
  63         });\r
  64         $("#suggest14").autocomplete(cities, {
  65                 matchContains: true,
  66                 minChars: 0
  67         });
  68         $("#suggest3").autocomplete(cities, {
  69                 multiple: true,
  70                 mustMatch: true,
  71                 autoFill: true
  72         });
  73         $("#suggest4").autocomplete('search.php', {
  74                 width: 300,
  75                 multiple: true,
  76                 matchContains: true,
  77                 formatItem: formatItem,
  78                 formatResult: formatResult\r
  79         });
  80         $("#imageSearch").autocomplete("images.php", {
  81                 width: 320,
  82                 max: 4,
  83                 highlight: false,
  84                 scroll: true,
  85                 scrollHeight: 300,
  86                 formatItem: function(data, i, n, value) {
  87                         return "<img src='images/" + value + "'/> " + value.split(".")[0];
  88                 },
  89                 formatResult: function(data, value) {
  90                         return value.split(".")[0];
  91                 }
  92         });
  93         $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp"], {
  94                 width: 320,
  95                 max: 4,
  96                 highlight: false,
  97                 multiple: true,
  98                 multipleSeparator: " ",
  99                 scroll: true,
 100                 scrollHeight: 300
 101         });
 102
 103
 104         $(":text, textarea").result(findValueCallback).next().click(function() {\r
 105                 $(this).prev().search();\r
 106         });
 107         $("#singleBirdRemote").result(function(event, data, formatted) {
 108                 if (data)
 109                         $(this).parent().next().find("input").val(data[1]);
 110         });
 111         $("#suggest4").result(function(event, data, formatted) {
 112                 var hidden = $(this).parent().next().find(">:input");
 113                 hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
 114         });
 115     $("#suggest15").autocomplete(cities, { scroll: true } );
 116         $("#scrollChange").click(changeScrollHeight);
 117
 118         $("#thickboxEmail").autocomplete(emails, {
 119                 minChars: 0,
 120                 width: 310,
 121                 matchContains: true,
 122                 highlightItem: false,
 123                 formatItem: function(row, i, max, term) {
 124                         return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
 125                 },
 126                 formatResult: function(row) {
 127                         return row.to;
 128                 }
 129         });
 130
 131         $("#clear").click(function() {
 132                 $(":input").unautocomplete();
 133         });
 134 });
 135
 136 function changeOptions(){
 137         var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
 138         if (max > 0) {
 139                 $("#suggest1").setOptions({
 140                         max: max
 141                 });
 142         }
 143 }
 144
 145 function changeScrollHeight() {
 146     var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight));
 147     if(h > 0) {
 148         $("#suggest1").setOptions({
 149                         scrollHeight: h
 150                 });
 151     }
 152 }
 153
 154 function changeToMonths(){
 155         $("#suggest1")
 156                 // clear existing data
 157                 .val("")
 158                 // change the local data to months
 159                 .setOptions({data: months})
 160                 // get the label tag
 161                 .prev()
 162                 // update the label tag
 163                 .text("Month (local):");
 164 }
 165 </script>
 166
 167 </head>
 168
 169 <body>
 170
 171 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
 172
 173 <div id="content">
 174
 175         <form autocomplete="off">
 176                 <p>
 177                         <label>Single City (local):</label>
 178                         <input type="text" id="suggest1" />
 179                         <input type="button" value="Get Value" />
 180                         <input type="button" value="Change Max Items" onclick="changeOptions();" />
 181                         <input type="button" value="Change to Month Data" onclick="changeToMonths();" />
 182                         <input type="button" value="Change scroll height" id="scrollChange" />
 183                 </p>
 184                 <p>
 185                         <label>Month (local):</label>
 186                         <input type="text" id="month" />
 187                         <input type="button" value="Get Value" />
 188                         (Current month is excluded from list)
 189                 </p>
 190                 <p>
 191                         <label>E-Mail (local):</label>
 192                         <input type="text" id="suggest13" />
 193                         <input type="button" value="Get Value" />
 194                 </p>
 195                 <p>
 196                         <label>Single Bird (remote):</label>
 197                         <input type="text" id="singleBirdRemote" />
 198                         <input type="button" value="Get Value" />
 199                 </p>
 200                 <p>
 201                         <label>Hidden input</label>
 202                         <input />
 203                 </p>
 204                 <p>
 205                         <label>Single City (contains):</label>
 206                         <input type="text" id="suggest14" />
 207                         <input type="button" value="Get Value" />
 208                 </p>
 209                 <p>\r
 210                         <label>Multiple Cities (local):</label>\r
 211                         <textarea id='suggest3' cols='40' rows='3'></textarea>\r
 212                         <input type="button" value="Get Value" />\r
 213                 </p>\r
 214                 <p>
 215                         <label>Multiple Birds (remote):</label>
 216                         <textarea id='suggest4'></textarea>\r
 217                         <input type="button" value="Get Value" />
 218                 </p>
 219                 <p>
 220                         <label>Hidden input</label>
 221                         <textarea></textarea>
 222                 </p>
 223     <p>
 224                         <label>Image search (remote):</label>
 225                         <input type="text" id='imageSearch' />
 226                         <input type="button" value="Get Value" />
 227                 </p>
 228     <p>
 229                         <label>Tags (local):</label>
 230                         <input type="text" id='tags' />
 231                         <input type="button" value="Get Value" />
 232                 </p>
 233                 <p>
 234                         <label>Some dropdown (&lt;3 IE):</label>
 235                         <select>
 236                                 <option value="">Item 12334455</option>
 237                                 <option value="2">Item 2</option>
 238                                 <option value="3">Item 3</option>
 239                                 <option value="4">Item 4</option>
 240                         </select>
 241                 </p>
 242
 243                 <input type="submit" value="Submit" />
 244         </form>
 245
 246         <p>
 247                 <a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">Click here for an autocomplete inside a thickbox window.</a> (this should work even if it is beyond the fold)
 248         </p>
 249
 250         <div id="modalWindow" style="display: none;">
 251                 <p>
 252                         <label>E-Mail (local):</label>
 253                         <input type="text" id="thickboxEmail" />
 254                         <input type="button" value="Get Value" />
 255                 </p>
 256                 </div>
 257
 258         <button id="clear">Remove all autocompletes</button>
 259
 260         <a href="search.phps">PHP script used to for remote autocomplete</a>
 261
 262         <h3>Result:</h3> <ol id="result"></ol>
 263
 264 </div>
 265 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
 266 </script>
 267 <script type="text/javascript">
 268 _uacct = "UA-2623402-1";
 269 urchinTracker();
 270 </script>
 271 </body>
 272 </html>