273 lines
7.5 KiB
HTML
273 lines
7.5 KiB
HTML
|
<!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>
|