AutoComplete Widget :: Customizable Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Customizable Example</title>
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./examples/autocomplete/css/examples.css">
<style type="text/css">
#custommod {position:relative;padding:1em;}
#customautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#custominput {position:absolute;width:100%;height:1.4em;}
#customcontainer {position:absolute;top:1.7em;width:100%;}
#customcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#customcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#customcontainer ul {padding:5px 0;width:100%;}
#customcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#customcontainer li.yui-ac-highlight {background:#ff0;}
#customcontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a>
:: Customizable Example</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Code generator begins
<div id="coder">
<h3>Sample code</h3>
<textarea id="output"></textarea>
</div>
Code generator ends -->
<!-- Content begins -->
<p>When this page loads, a DataSource instance is created that points to the
same DataSource as the <a href="./ysearch_flat.html">Query a custom PHP
script for flat data</a> example. However, by changing the values below, you
can customize the AutoComplete implementation to your own configurations.
</p>
<!-- AutoComplete begins -->
<div id="custommod">
<form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
<h2>Customize your own AutoComplete widget:</h2>
<div id="customautocomplete">
<input id="custominput">
<div id="customcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Panel begins -->
<form id="panel">
<!-- The following is in a select to demonstrate the useIFrame feature -->
<select><option>Customize configurations for AutoComplete</option></select>
<div>
<input id="animhoriz" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
<label for="animhoriz">Animate Horizontally</label>
</div>
<div>
<input id="animvert" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
<label for="animvert">Animate Vertically</label>
</div>
<div>
<label for="animspeed">Animation Speed: </label>
<input id="animspeed" type="text" size="2" value="0.3">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateAnimSpeed();">
</div>
<div>
<input id="useshadow" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
<label for="useshadow">Use Shadow</label>
</div>
<div>
<input id="useiframe" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
<label for="useiframe">Use IFrame</label>
</div>
<div>
<input id="typeahead" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
<label for="typeahead">Type Ahead</label>
</div>
<div>
<input id="forceselection" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
<label for="forceselection">Force a Selection</label>
</div>
<div>
<label for="maxresults">Maximum Results: </label>
<input id="maxresults" type="text" size="2" value="10">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMaxResults();">
</div>
<div>
<label for="minquerylength">Minimum Query Length: </label>
<input id="minquerylength" type="text" size="2" value="1">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMinQueryLength();"
</div>
<div>
<label for="querydelay">Query Delay: </label>
<input id="querydelay" type="text" size="2" value="0.5">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateQueryDelay();">
</div>
<div>
<label for="delimchar">Array of Delimiter Character(s)</label><br>
<input id="delimchar" type="text" size="30" value="">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
</div>
<div>
<label for="highlightclass">Highlight Classname</label><br>
<input id="highlightclass" type="text" size="30" value="yui-ac-highlight" maxlength="30">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHighlight();">
</div>
<div>
<label for="prehighlightclass">Pre-highlight Classname</label><br>
<input id="prehighlightclass" type="text" size="30" value="" maxlength="30">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
</div>
<div>
<input id="allowbrowserautocomplete" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);" checked>
<label for="allowbrowserautocomplete">Allow Browser Autocomplete</label>
</div>
<div>
<input id="alwaysshowcontainer" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
<label for="alwaysshowcontainer">Always Show Container</label>
</div>
<div>
<label for="header">Set Header</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHeader();"><br>
<textarea id="header" cols="25" rows="5"></textarea>
</div>
<div>
<label for="body">Set Body</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateBody();"><br>
<textarea id="body" cols="25" rows="5"></textarea>
</div>
<div>
<label for="footer">Set Footer</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateFooter();"><br>
<textarea id="footer" cols="25" rows="5"></textarea>
</div>
</form>
<!-- Panel ends -->
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/event/event-debug.js"></script>
<script type="text/javascript" src="./build/connection/connection.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACCustomizable = function(){
var mylogreader, mylogwriter;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogreader = new YAHOO.widget.LogReader("logger");
mylogwriter = new YAHOO.widget.LogWriter("Custom configs");
// DataSource 1
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_flat.php", ["\n", "\t"]);
// This is the one non-default value other than constructor params
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
// AutoComplete 1
oAutoComp = new YAHOO.widget.AutoComplete('custominput','customcontainer', oACDS);
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
oAutoComp.useIFrame = true;
YAHOO.util.Dom.get("useiframe").checked = true;
}
},
toggleAnimHoriz: function(animHoriz) {
oAutoComp.animHoriz = animHoriz.checked;
mylogwriter.log("Updated animHoriz to " + oAutoComp.animHoriz + ".");
},
toggleAnimVert: function(animVert) {
oAutoComp.animVert = animVert.checked;
mylogwriter.log("Updated animVert to " + oAutoComp.animVert + ".");
},
updateAnimSpeed: function() {
var animSpeed = document.getElementById("animspeed").value;
if (isNaN(animSpeed) || (animSpeed < 1)) {
document.getElementById("animspeed").value = oAutoComp.animSpeed;
mylogwriter.log("Could not update animSpeed.", "warn");
return;
}
else {
oAutoComp.animSpeed = animSpeed;
mylogwriter.log("Updated animSpeed to " + oAutoComp.animSpeed + ".");
}
},
toggleShadow: function(useShadow) {
oAutoComp.useShadow = useShadow.checked;
mylogwriter.log("Updated useShadow to " + oAutoComp.useShadow + ".");
},
toggleIFrame: function(useIFrame) {
oAutoComp.useIFrame = useIFrame.checked;
mylogwriter.log("Updated useIFrame to " + oAutoComp.useIFrame + ".");
},
toggleTypeAhead: function(typeAhead) {
oAutoComp.typeAhead = typeAhead.checked;
mylogwriter.log("Updated typeAhead to " + oAutoComp.typeAhead + ".");
},
toggleForceSelection: function(forceSelection) {
oAutoComp.forceSelection = forceSelection.checked;
oAutoComp.forceSelection = forceSelection.checked;
mylogwriter.log("Updated forceSelection to " + oAutoComp.forceSelection + ".");
},
updateMaxResults: function() {
var maxResults = document.getElementById("maxresults").value;
if (isNaN(maxResults) || (maxResults < 1)) {
document.getElementById("maxresults").value = oAutoComp.maxResultsDisplayed;
mylogwriter.log("Could not update maxResultsDisplayed.", "warn");
return;
}
else {
oAutoComp.maxResultsDisplayed = maxResults;
mylogwriter.log("Updated maxResultsDisplayed to " + oAutoComp.maxResultsDisplayed + ".");
}
},
updateMinQueryLength: function() {
var minQueryLength = document.getElementById("minquerylength").value;
if (isNaN(minQueryLength) || (minQueryLength < 1)) {
document.getElementById("minquerylength").value = oAutoComp.minQueryLength;
mylogwriter.log("Could not update minQueryLength.", "warn");
return;
}
else {
oAutoComp.minQueryLength = minQueryLength;
mylogwriter.log("Updated minQueryLength to " + oAutoComp.minQueryLength + ".");
}
},
updateQueryDelay: function() {
var queryDelay = document.getElementById("querydelay").value;
if (isNaN(queryDelay) || (queryDelay < 0)) {
document.getElementById("querydelay").value = oAutoComp.queryDelay;
mylogwriter.log("Could not update queryDelay.", "warn");
return;
}
else {
oAutoComp.queryDelay = queryDelay;
mylogwriter.log("Updated query delay to " + oAutoComp.queryDelay + ".");
}
},
updateDelimChar: function() {
var sValue = document.getElementById("delimchar").value;
if((sValue.indexOf("[") == 0) && (sValue.indexOf("]") == sValue.length-1)) {
oAutoComp.delimChar = eval(sValue);
}
else if(sValue.length < 2){
oAutoComp.delimChar = sValue;
}
else {
document.getElementById("delimchar").value = oAutoComp.delimChar;
mylogwriter.log("Could not update delimChar.", "warn");
return;
}
mylogwriter.log("Updated delimChar to " + oAutoComp.delimChar + ".");
},
updateHighlight: function() {
oAutoComp.highlightClassName = document.getElementById("highlightclass").value;
mylogwriter.log("Updated highlightClassName to " + oAutoComp.highlightClassName + ".");
},
updatePrehighlight: function() {
oAutoComp.prehighlightClassName = document.getElementById("prehighlightclass").value;
mylogwriter.log("Updated prehighlightClassName to " + oAutoComp.prehighlightClassName + ".");
},
toggleAllowBrowserAutocomplete: function(allowBrowserAutocomplete) {
oAutoComp.allowBrowserAutocomplete = allowBrowserAutocomplete.checked;
mylogwriter.log("Updated allowBrowserAutocomplete to " + oAutoComp.allowBrowserAutocomplete + ".");
},
toggleAlwaysShowContainer: function(alwaysShowContainer) {
var container = YAHOO.util.Dom.getElementsByClassName("yui-ac-content","div","customcontainer")[0];
if(container) {
oAutoComp.alwaysShowContainer = alwaysShowContainer.checked;
if(oAutoComp.alwaysShowContainer) {
oAutoComp.setBody("alwaysShowContainer enabled");
}
else {
container.style.height = "0";
oAutoComp.setBody();
}
mylogwriter.log("Updated alwaysShowContainer to " + oAutoComp.alwaysShowContainer + ".");
}
else {
mylogwriter.log("Could not update alwaysShowContainer.","warn");
}
},
updateHeader: function() {
var header = document.getElementById("header").value;
oAutoComp.setHeader(header);
mylogwriter.log("Header updated.");
},
updateBody: function() {
var body = document.getElementById("body").value;
oAutoComp.setBody(body);
mylogwriter.log("Body updated.");
},
updateFooter: function() {
var footer = document.getElementById("footer").value;
oAutoComp.setFooter(footer);
mylogwriter.log("Footer updated.");
},
validateForm: function() {
// Validate form inputs here
return true;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACCustomizable.init);
</script>
</div>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category