diff options
Diffstat (limited to 'plugins/Autocomplete/jquery-autocomplete/demo/index.html')
| -rw-r--r-- | plugins/Autocomplete/jquery-autocomplete/demo/index.html | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/plugins/Autocomplete/jquery-autocomplete/demo/index.html b/plugins/Autocomplete/jquery-autocomplete/demo/index.html new file mode 100644 index 000000000..977483e04 --- /dev/null +++ b/plugins/Autocomplete/jquery-autocomplete/demo/index.html @@ -0,0 +1,272 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + +<title>jQuery Autocomplete Plugin</title> +<script type="text/javascript" src="../lib/jquery.js"></script> +<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script> +<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script> +<script type='text/javascript' src='../lib/thickbox-compressed.js'></script> +<script type='text/javascript' src='../jquery.autocomplete.js'></script>
+<script type='text/javascript' src='localdata.js'></script> +<link rel="stylesheet" type="text/css" href="main.css" /> +<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" /> +<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" /> + +<script type="text/javascript"> +$().ready(function() { + + function findValueCallback(event, data, formatted) {
+ $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result"); + } + + function formatItem(row) { + return row[0] + " (<strong>id: " + row[1] + "</strong>)"; + } + function formatResult(row) { + return row[0].replace(/(<.+?>)/gi, ''); + } + + $("#suggest1").autocomplete(cities); + $("#month").autocomplete(months, { + minChars: 0, + max: 12, + autoFill: true, + mustMatch: true, + matchContains: false, + scrollHeight: 220, + formatItem: function(data, i, total) { + // don't show the current month in the list of values (for whatever reason) + if ( data[0] == months[new Date().getMonth()] ) + return false; + return data[0]; + } + }); + $("#suggest13").autocomplete(emails, { + minChars: 0, + width: 310,
+ matchContains: true, + autoFill: false, + formatItem: function(row, i, max) { + return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]"; + }, + formatMatch: function(row, i, max) { + return row.name + " " + row.to; + }, + formatResult: function(row) { + return row.to; + } + });
+ $("#singleBirdRemote").autocomplete("search.php", {
+ width: 260,
+ selectFirst: false
+ });
+ $("#suggest14").autocomplete(cities, { + matchContains: true, + minChars: 0 + }); + $("#suggest3").autocomplete(cities, { + multiple: true, + mustMatch: true, + autoFill: true + }); + $("#suggest4").autocomplete('search.php', { + width: 300, + multiple: true, + matchContains: true, + formatItem: formatItem, + formatResult: formatResult
+ }); + $("#imageSearch").autocomplete("images.php", { + width: 320, + max: 4, + highlight: false, + scroll: true, + scrollHeight: 300, + formatItem: function(data, i, n, value) { + return "<img src='images/" + value + "'/> " + value.split(".")[0]; + }, + formatResult: function(data, value) { + return value.split(".")[0]; + } + }); + $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp"], { + width: 320, + max: 4, + highlight: false, + multiple: true, + multipleSeparator: " ", + scroll: true, + scrollHeight: 300 + }); + + + $(":text, textarea").result(findValueCallback).next().click(function() {
+ $(this).prev().search();
+ }); + $("#singleBirdRemote").result(function(event, data, formatted) { + if (data) + $(this).parent().next().find("input").val(data[1]); + }); + $("#suggest4").result(function(event, data, formatted) { + var hidden = $(this).parent().next().find(">:input"); + hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]); + }); + $("#suggest15").autocomplete(cities, { scroll: true } ); + $("#scrollChange").click(changeScrollHeight); + + $("#thickboxEmail").autocomplete(emails, { + minChars: 0, + width: 310, + matchContains: true, + highlightItem: false, + formatItem: function(row, i, max, term) { + return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: <" + row.to + "></span>"; + }, + formatResult: function(row) { + return row.to; + } + }); + + $("#clear").click(function() { + $(":input").unautocomplete(); + }); +}); + +function changeOptions(){ + var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max)); + if (max > 0) { + $("#suggest1").setOptions({ + max: max + }); + } +} + +function changeScrollHeight() { + var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight)); + if(h > 0) { + $("#suggest1").setOptions({ + scrollHeight: h + }); + } +} + +function changeToMonths(){ + $("#suggest1") + // clear existing data + .val("") + // change the local data to months + .setOptions({data: months}) + // get the label tag + .prev() + // update the label tag + .text("Month (local):"); +} +</script> + +</head> + +<body> + +<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1> + +<div id="content"> + + <form autocomplete="off"> + <p> + <label>Single City (local):</label> + <input type="text" id="suggest1" /> + <input type="button" value="Get Value" /> + <input type="button" value="Change Max Items" onclick="changeOptions();" /> + <input type="button" value="Change to Month Data" onclick="changeToMonths();" /> + <input type="button" value="Change scroll height" id="scrollChange" /> + </p> + <p> + <label>Month (local):</label> + <input type="text" id="month" /> + <input type="button" value="Get Value" /> + (Current month is excluded from list) + </p> + <p> + <label>E-Mail (local):</label> + <input type="text" id="suggest13" /> + <input type="button" value="Get Value" /> + </p> + <p> + <label>Single Bird (remote):</label> + <input type="text" id="singleBirdRemote" /> + <input type="button" value="Get Value" /> + </p> + <p> + <label>Hidden input</label> + <input /> + </p> + <p> + <label>Single City (contains):</label> + <input type="text" id="suggest14" /> + <input type="button" value="Get Value" /> + </p> + <p>
+ <label>Multiple Cities (local):</label>
+ <textarea id='suggest3' cols='40' rows='3'></textarea>
+ <input type="button" value="Get Value" />
+ </p>
+ <p> + <label>Multiple Birds (remote):</label> + <textarea id='suggest4'></textarea>
+ <input type="button" value="Get Value" /> + </p> + <p> + <label>Hidden input</label> + <textarea></textarea> + </p> + <p> + <label>Image search (remote):</label> + <input type="text" id='imageSearch' /> + <input type="button" value="Get Value" /> + </p> + <p> + <label>Tags (local):</label> + <input type="text" id='tags' /> + <input type="button" value="Get Value" /> + </p> + <p> + <label>Some dropdown (<3 IE):</label> + <select> + <option value="">Item 12334455</option> + <option value="2">Item 2</option> + <option value="3">Item 3</option> + <option value="4">Item 4</option> + </select> + </p> + + <input type="submit" value="Submit" /> + </form> + + <p> + <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) + </p> + + <div id="modalWindow" style="display: none;"> + <p> + <label>E-Mail (local):</label> + <input type="text" id="thickboxEmail" /> + <input type="button" value="Get Value" /> + </p> + </div> + + <button id="clear">Remove all autocompletes</button> + + <a href="search.phps">PHP script used to for remote autocomplete</a> + + <h3>Result:</h3> <ol id="result"></ol> + +</div> +<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> +</script> +<script type="text/javascript"> +_uacct = "UA-2623402-1"; +urchinTracker(); +</script> +</body> +</html> |