JavaScript DHTML/Ajax Layer/AutoComplete Widget
Содержание
- 1 Ajax 4 Suggest
- 2 Autocompleter functional tes
- 3 Autocompleter functional test 2
- 4 Auto complete textbox
- 5 AutoComplete Widget :: Basic JSON Implementation
- 6 AutoComplete Widget :: Basic XML Implementation
- 7 AutoComplete Widget :: Complex Flat-data Implementation
- 8 AutoComplete Widget :: Customizable Example
- 9 AutoComplete Widget :: Customized XML Implementation
- 10 AutoComplete Widget :: JS Array Example
- 11 AutoComplete Widget :: JS Function Example
Ajax 4 Suggest
<A href="http://www.wbex.ru/Code/JavaScriptDownload/ajax4suggest20060125.zip">ajax4suggest20060125.zip( 10 k)</a>
1. <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltes.htm">Autocompleter functional tes</a> <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltes.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltest2.htm">Autocompleter functional test 2</a> <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltest2.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/Autocompletetextbox.htm">Auto complete textbox</a> <A href="/Code/JavaScript/Ajax-Layer/Autocompletetextbox.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizableExample.htm">AutoComplete Widget :: Customizable Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizableExample.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizedXMLImplementation.htm">AutoComplete Widget :: Customized XML Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizedXMLImplementation.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSArrayExample.htm">AutoComplete Widget :: JS Array Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSArrayExample.htm"></a> 7. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSFunctionExample.htm">AutoComplete Widget :: JS Function Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSFunctionExample.htm"></a> 8. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetComplexFlatdataImplementation.htm">AutoComplete Widget :: Complex Flat-data Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetComplexFlatdataImplementation.htm"></a> 9. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicJSONImplementation.htm">AutoComplete Widget :: Basic JSON Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicJSONImplementation.htm"></a> 10. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicXMLImplementation.htm">AutoComplete Widget :: Basic XML Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicXMLImplementation.htm"></a>
Autocompleter functional tes
<!-- Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Autocompleter functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
This is an incremental Ajax autocompleter. Type something, then type a comma, than type more.<br/>
Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac1","ac1update","_autocomplete_result.html", { tokens: ","} );
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac2","ac2update","_autocomplete_result.html");
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac3","ac3update","_autocomplete_result.html");
</script>
<br/><br/>
Local incremental array autocompleter ac4<br/> with full-search. Type "Jac", hit enter a few <br/>times, type "gne".<br/> <textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Autocompleter.Local("ac4","ac4update",
new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });
</script>
<br/><br/>
Local incremental array autocompleter ac5<br/> with fixed height and scrollbar. Type "Jac", hit enter a few <br/>times, type "gne".<br/> <input id="ac5" type="text" autocomplete="off"/>
<div id="ac5update" style="display:none;border:1px solid black;background-color:white;height:50px;overflow:auto;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Autocompleter.Local("ac5","ac5update",
new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });
</script>
<br /><br /><br />
<br /><br /><br />
<div id="debug" style="font-size:11px;"></div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Autocompleter functional test 2
<!-- Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Autocompleter functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" type="text"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac1","ac1update","_autocomplete_result.html");
</script>
<br/>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac2","ac2update","_autocomplete_result.html",{parameters:"a=b&b=c"});
</script>
<br/>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):
<br/>
<div style="position:relative">
<input id="ac3" type="text"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac3","ac3update","_autocomplete_result.html",{select:"selectme"});
</script>
<br/><select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>
<br/><br/>
Autocompleter ac4 (autoselects option if single single option is returned):
<br/>
<input id="ac4" type="text"/>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac4","ac4update","_autocomplete_result_single.html",{select:"selectme",autoSelect:true});
</script>
<div id="debug" style="font-size:11px;"></div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Auto complete textbox
<A href="http://www.wbex.ru/Code/JavaScriptDownload/acnik-1.0.zip">acnik-1.0.zip( 12 k)</a>
1. <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltes.htm">Autocompleter functional tes</a> <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltes.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltest2.htm">Autocompleter functional test 2</a> <A href="/Code/JavaScript/Ajax-Layer/Autocompleterfunctionaltest2.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizableExample.htm">AutoComplete Widget :: Customizable Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizableExample.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizedXMLImplementation.htm">AutoComplete Widget :: Customized XML Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetCustomizedXMLImplementation.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSArrayExample.htm">AutoComplete Widget :: JS Array Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSArrayExample.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSFunctionExample.htm">AutoComplete Widget :: JS Function Example</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSFunctionExample.htm"></a> 7. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetComplexFlatdataImplementation.htm">AutoComplete Widget :: Complex Flat-data Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetComplexFlatdataImplementation.htm"></a> 8. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicJSONImplementation.htm">AutoComplete Widget :: Basic JSON Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicJSONImplementation.htm"></a> 9. <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicXMLImplementation.htm">AutoComplete Widget :: Basic XML Implementation</a> <A href="/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetBasicXMLImplementation.htm"></a> 10. <A href="/Code/JavaScript/Ajax-Layer/Ajax4Suggest.htm">Ajax 4 Suggest</a> <A href="/Code/JavaScript/Ajax-Layer/Ajax4Suggest.htm"></a>
AutoComplete Widget :: Basic JSON Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Basic JSON Implementation</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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;text-align:center;z-index:9050;}
#ysearchautocomplete {position:relative;}
#ysearchinput {position:relative;width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
#ysearchsubmit {position:relative;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services</h1>
</div>
<div id="bd">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
<span>Yahoo! Search</span>
<span id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</span>
<input id="ysearchsubmit" type="submit" value="Submit Query">
</form>
</div>
<!-- AutoComplete ends -->
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to Yahoo! Search Web Services, via a
simple PHP proxy. The DataSource schema is defined for JSON data. In order
to be compatible with the Yahoo! Search application, the DataSource"s
queryMatchContains is set to true, and the scriptQueryAppend has been
defined to pass in additional arguments.</p>
<h3>AutoComplete</h3>
<p>This AutoComplete instance uses only default configuration values.</p>
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {position:relative;text-align:center;z-index:9050;}
#ysearchautocomplete {position:relative;}
#ysearchinput {position:relative;width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
#ysearchsubmit {position:relative;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
<span>Yahoo! Search</span>
<span id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</span>
<input id="ysearchsubmit" type="submit" value="Submit Query">
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_proxy.php", ["ResultSet.Result", "Title", "Summary", "Cache"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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="./examples/autocomplete/js/json.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.ACJson = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
// Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_proxy.php", ["ResultSet.Result", "Title", "Summary", "Cache"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Basic XML Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Basic XML Implementation</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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#ysearchinput {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./examples/autocomplete/img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Yahoo! Search Web Services</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to Yahoo! Search Web Services, via a
simple PHP proxy. The DataSource schema is defined for XML data. In order
to be compatible with the Yahoo! Search application, the DataSource"s
queryMatchContains is set to true, and the scriptQueryAppend has been
defined to pass in additional arguments.</p>
<h3>AutoComplete</h3>
<p>This AutoComplete instance uses only default configuration values.</p>
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
<h2>Yahoo! Search</h2>
<div id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#ysearchinput {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
<h2>Yahoo! Search</h2>
<div id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
oACDS.responseType = oACDS.TYPE_XML;
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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.ACXml = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_proxy.php", ["Result", "Title"]);
oACDS.responseType = oACDS.TYPE_XML;
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACXml.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Complex Flat-data Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Complex Flat-data Implementation</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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchinput0, #ysearchinput1, #ysearchinput2 {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat Data Custom Script</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to a custom PHP script that returns flat
demo data of recent search terms and number of results. The schema has
been defined to parse tab-delimited data rows that are separated by line
breaks. For maximum cache usage, the DataSource has been
configured to match query subsets in the cache, and the cache itself has
been turned up to 60 entries for fewer round trips to the server.
</p>
<h3>AutoComplete</h3>
<p>Three AutoComplete instances are created that all point the a single
DataSource for maximimum cache efficiency. Queries can be delimited using
the semi-colon (;) character. For demonstration purposes, each instance
decreases the query delay slightly, and each instance presents the return
data in the container in a slightly different way.</p>
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
<h2>Yahoo! Search (1 sec query delay):</h2>
<div id="ysearchautocomplete0">
<input id="ysearchinput0">
<div id="ysearchcontainer0"></div>
</div>
<h2>Yahoo! Search (0.5 sec query delay):</h2>
<div id="ysearchautocomplete1">
<input id="ysearchinput1">
<div id="ysearchcontainer1"></div>
</div>
<h2>Yahoo! Search (0 sec query delay):</h2>
<div id="ysearchautocomplete2">
<input id="ysearchinput2">
<div id="ysearchcontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchinput0, #ysearchinput1, #ysearchinput2 {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
<h2>Yahoo! Search (1 sec query delay):</h2>
<div id="ysearchautocomplete0">
<input id="ysearchinput0">
<div id="ysearchcontainer0"></div>
</div>
<h2>Yahoo! Search (0.5 sec query delay):</h2>
<div id="ysearchautocomplete1">
<input id="ysearchinput1">
<div id="ysearchcontainer1"></div>
</div>
<h2>Yahoo! Search (0 sec query delay):</h2>
<div id="ysearchautocomplete2">
<input id="ysearchinput2">
<div id="ysearchcontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate one XHR DataSource and define schema as an array:
// ["Record Delimiter",
// "Field Delimiter"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_flat.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
// Instantiate first AutoComplete
var myInput = document.getElementById("ysearchinput0");
var myContainer = document.getElementById("ysearchcontainer0");
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
oAutoComp0.delimChar = ";";
oAutoComp0.queryDelay = 1;
oAutoComp0.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div id="ysearchresult"><div class="ysearchquery">",
nQuantity,
"</div><span style="font-weight:bold">",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate second AutoComplete
oAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1", oACDS);
oAutoComp1.delimChar = ";";
oAutoComp1.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div class="ysearchresult"><div class="ysearchquery">",
nQuantity,
"</div><span style="color:red">",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate third AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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.ACFlatData = function(){
var mylogger;
var oACDS;
var oAutoComp0,oAutoComp1,oAutoComp2;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate one XHR DataSource and define schema as an array:
// ["Record Delimiter",
// "Field Delimiter"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_flat.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
// Instantiate first AutoComplete
var myInput = document.getElementById("ysearchinput0");
var myContainer = document.getElementById("ysearchcontainer0");
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
oAutoComp0.delimChar = ";";
oAutoComp0.queryDelay = 1;
oAutoComp0.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div id="ysearchresult"><div class="ysearchquery">",
nQuantity,
"</div><span style="font-weight:bold">",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate second AutoComplete
oAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1", oACDS);
oAutoComp1.delimChar = ";";
oAutoComp1.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div class="ysearchresult"><div class="ysearchquery">",
nQuantity,
"</div><span style="color:red">",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate third AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACFlatData.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Customized XML Implementation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Customized XML Implementation</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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#flickrmod {position:relative;padding:1em;}
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#flickrinput {position:absolute;width:100%;height:1.4em;}
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
#flickrcontainer ul {padding:5px 0;width:100%;}
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Flickr Web Services</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to Flickr Web Services, via a simple PHP
proxy. The DataSource schema is defined for XML data. In order to be
compatible with the Flickr application, the scriptQueryParameter has been
customized to be "tags", and scriptQueryAppend has been defined to pass in
additional arguments. Finally, the cache has been disabled so that each
query is forced to make a trip to the live source.</p>
<h3>AutoComplete</h3>
<p>This AutoComplete instance defines a robust formatResult() function that
formats the result data into HTML markup that displays an image from Flickr
and its title. The autoHighlight feature has additionally been disabled.</p>
<!-- AutoComplete begins -->
<div id="flickrmod">
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
<div id="flickrautocomplete">
<input id="flickrinput">
<div id="flickrcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#flickrmod {position:relative;padding:1em;}
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#flickrinput {position:absolute;width:100%;height:1.4em;}
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
#flickrcontainer ul {padding:5px 0;width:100%;}
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="flickrmod">
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
<div id="flickrautocomplete">
<input id="flickrinput">
<div id="flickrcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["ResultNodeName",
// "QueryKeyAttributeOrNodeName",
// "AdditionalParamAttributeOrNodeName1",
// ...
// "AdditionalParamAttributeOrNodeNameN"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/flickr_proxy.php",
["photo", "title", "id", "owner", "secret", "server"]);
oACDS.scriptQueryParam = "tags";
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
oACDS.maxCacheEntries = 0;
oACDS.scriptQueryAppend = "method=flickr.photos.search";
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("flickrinput","flickrcontainer", oACDS);
oAutoComp.autoHighlight = false;
oAutoComp.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem[0];
var sId = oResultItem[1];
var sOwner = oResultItem[2];
var sSecret = oResultItem[3];
var sServer = oResultItem[4];
var sUrl = "http://static.flickr.ru/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_s.jpg";
var sMarkup = "<img src="" + sUrl + "" class="yui-ac-flickrImg"> " + sTitle;
return (sMarkup);
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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.ACFlickr = function() {
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["ResultNodeName",
// "QueryKeyAttributeOrNodeName",
// "AdditionalParamAttributeOrNodeName1",
// ...
// "AdditionalParamAttributeOrNodeNameN"]
oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/flickr_proxy.php",
["photo", "title", "id", "owner", "secret", "server"]);
oACDS.scriptQueryParam = "tags";
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
oACDS.maxCacheEntries = 0;
oACDS.scriptQueryAppend = "method=flickr.photos.search";
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("flickrinput","flickrcontainer", oACDS);
oAutoComp.autoHighlight = false;
oAutoComp.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem[0];
var sId = oResultItem[1];
var sOwner = oResultItem[2];
var sSecret = oResultItem[3];
var sServer = oResultItem[4];
var sUrl = "http://static.flickr.ru/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_s.jpg";
var sMarkup = "<img src="" + sUrl + "" class="yui-ac-flickrImg"> " + sTitle;
return (sMarkup);
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACFlickr.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: JS Array Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Array 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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 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> :: JavaScript Array</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>Two DataSource instances point to in-memory JavaScript arrays. The first
array holds the 50 US states. The second array itself holds arrays of US
area codes and their corresponding states.</p>
<h3>AutoComplete</h3>
<p>Since the two DataSources for this example are already loaded into memory
via JavaScript arrays, queries should be very fast to return data. Therefore,
both AutoComplete instances are configured to have a query delay of zero
seconds.</p.
<p>A few configurations have also been made to aid the usability of the
widgets. The autoHighlight and typeAhead features can help reduce the number
of user actions it takes to submit a valid selection. The
prehighlightClassName feature provides an supplemental visual feedback for mouse
events.</p>
<p>Additionally, the second AutoComplete instance also has been enhanced to
display two data fields in the container: the area code and the area code"s
state. The forceSelection feature has been enabled to prevent the user from
typing in a free-form selection.</p>
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida" // Entire array not shown
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"] // Entire array not shown
];
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp.typeAhead = true;
oAutoComp.useShadow = true;
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete("statesinput2","statescontainer2", oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp2.typeAhead = true;
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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/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 -->
<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"],
["208", "Idaho"],
["209", "California"],
["210", "Texas"],
["212", "New York"],
["213", "California"],
["214", "Texas"],
["215", "Pennsylvania"],
["216", "Ohio"],
["217", "Illinois"],
["218", "Minnesota"],
["219", "Indiana"],
["224", "Illinois"],
["225", "Louisiana"],
["227", "Maryland"],
["228", "Mississippi"],
["229", "Georgia"],
["231", "Michigan"],
["234", "Ohio"],
["239", "Florida"],
["240", "Maryland"],
["242", "Bahamas"],
["246", "Barbados"],
["248", "Michigan"],
["250", "British Columbia"],
["251", "Alabama"],
["252", "North Carolina"],
["253", "Washington"],
["254", "Texas"],
["256", "Alabama"],
["260", "Indiana"],
["262", "Wisconsin"],
["264", "Anguilla"],
["267", "Pennsylvania"],
["268", "Antigua and Barbuda"],
["269", "Michigan"],
["270", "Kentucky"],
["276", "Virginia"],
["281", "Texas"],
["283", "Ohio"],
["284", "British Virgin Islands"],
["289", "Ontario"],
["301", "Maryland"],
["302", "Delaware"],
["303", "Colorado"],
["304", "West Virginia"],
["305", "Florida"],
["306", "Saskatchewan, Canada"],
["307", "Wyoming"],
["308", "Nebraska"],
["309", "Illinois"],
["310", "California"],
["312", "Illinois"],
["313", "Michigan"],
["314", "Missouri"],
["315", "New York"],
["316", "Kansas"],
["317", "Indiana"],
["318", "Louisiana"],
["319", "Iowa"],
["320", "Minnesota"],
["321", "Florida"],
["323", "California"],
["330", "Ohio"],
["331", "Illinois"],
["334", "Alabama"],
["336", "North Carolina"],
["337", "Louisiana"],
["339", "Massachusetts"],
["340", "US Virgin Islands"],
["345", "Cayman Islands"],
["347", "New York"],
["351", "Massachusetts"],
["352", "Florida"],
["360", "Washington"],
["361", "Texas"],
["386", "Florida"],
["401", "Rhode Island"],
["402", "Nebraska"],
["403", "Alberta, Canada"],
["404", "Georgia"],
["405", "Oklahoma"],
["406", "Montana"],
["407", "Florida"],
["408", "California"],
["409", "Texas"],
["410", "Maryland"],
["412", "Pennsylvania"],
["413", "Massachusetts"],
["414", "Wisconsin"],
["415", "California"],
["416", "Ontario, Canada"],
["417", "Missouri"],
["418", "Quebec, Canada"],
["419", "Ohio"],
["423", "Tennessee"],
["424", "California"],
["425", "Washington"],
["434", "Virginia"],
["435", "Utah"],
["440", "Ohio"],
["441", "Bermuda"],
["443", "Maryland"],
["445", "Pennsylvania"],
["450", "Quebec, Canada"],
["464", "Illinois"],
["469", "Texas"],
["470", "Georgia"],
["473", "Grenada"],
["475", "Connecticut"],
["478", "Georgia"],
["479", "Arkansas"],
["480", "Arizona"],
["484", "Pennsylvania"],
["501", "Arkansas"],
["502", "Kentucky"],
["503", "Oregon"],
["504", "Louisiana"],
["505", "New Mexico"],
["506", "New Brunswick, Canada"],
["507", "Minnesota"],
["508", "Massachusetts"],
["509", "Washington"],
["510", "California"],
["512", "Texas"],
["513", "Ohio"],
["514", "Quebec, Canada"],
["515", "Iowa"],
["516", "New York"],
["517", "Michigan"],
["518", "New York"],
["519", "Ontario, Canada"],
["520", "Arizona"],
["530", "California"],
["540", "Virginia"],
["541", "Oregon"],
["551", "New Jersey"],
["557", "Missouri"],
["559", "California"],
["561", "Florida"],
["562", "California"],
["563", "Iowa"],
["564", "Washington"],
["567", "Ohio"],
["570", "Pennsylvania"],
["571", "Virginia"],
["573", "Missouri"],
["574", "Indiana"],
["580", "Oklahoma"],
["585", "New York"],
["586", "Michigan"],
["601", "Mississippi"],
["602", "Arizona"],
["603", "New Hampshire"],
["604", "British Columbia, Canada"],
["605", "South Dakota"],
["606", "Kentucky"],
["607", "New York"],
["608", "Wisconsin"],
["609", "New Jersey"],
["610", "Pennsylvania"],
["612", "Minnesota"],
["613", "Ontario, Canada"],
["614", "Ohio"],
["615", "Tennessee"],
["616", "Michigan"],
["617", "Massachusetts"],
["618", "Illinois"],
["619", "California"],
["620", "Kansas"],
["623", "Arizona"],
["626", "California"],
["630", "Illinois"],
["631", "New York"],
["636", "Missouri"],
["641", "Iowa"],
["646", "New York"],
["647", "Ontario, Canada"],
["649", "Turks and Caicos Islands"],
["650", "California"],
["651", "Minnesota"],
["660", "Missouri"],
["661", "California"],
["662", "Mississippi"],
["664", "Montserrat"],
["667", "Maryland"],
["670", "CNMI"],
["671", "Guam"],
["678", "Georgia"],
["682", "Texas"],
["701", "North Dakota"],
["702", "Nevada"],
["703", "Virginia"],
["704", "North Carolina"],
["705", "Ontario, Canada"],
["706", "Georgia"],
["707", "California"],
["708", "Illinois"],
["709", "Newfoundland, Canada"],
["712", "Iowa"],
["713", "Texas"],
["714", "California"],
["715", "Wisconsin"],
["716", "New York"],
["717", "Pennsylvania"],
["718", "New York"],
["719", "Colorado"],
["720", "Colorado"],
["724", "Pennsylvania"],
["727", "Florida"],
["731", "Tennessee"],
["732", "New Jersey"],
["734", "Michigan"],
["737", "Texas"],
["740", "Ohio"],
["754", "Florida"],
["757", "Viriginia"],
["758", "St. Lucia"],
["760", "California"],
["763", "Minnesota"],
["765", "Indiana"],
["767", "Dominica"],
["770", "Georgia"],
["772", "Florida"],
["773", "Illinois"],
["774", "Massachusetts"],
["775", "Nevada"],
["778", "British Columbia, Canada"],
["780", "Alberta, Canada"],
["781", "Massachusetts"],
["784", "St. Vincent & Gren."],
["785", "Kansas"],
["786", "Florida"],
["787", "Puerto Rico"],
["801", "Utah"],
["802", "Vermont"],
["803", "South Carolina"],
["804", "Virginia"],
["805", "California"],
["806", "Texas"],
["807", "Ontario, Canada"],
["808", "Hawaii"],
["809", "Dominican Republic"],
["810", "Michigan"],
["812", "Indiana"],
["813", "Florida"],
["814", "Pennsylvania"],
["815", "Illinois"],
["816", "Missouri"],
["817", "Texas"],
["818", "California"],
["819", "Quebec, Canada"],
["828", "North Carolina"],
["830", "Texas"],
["831", "California"],
["832", "Texas"],
["835", "Pennsylvania"],
["843", "South Carolina"],
["845", "New York"],
["847", "Illinois"],
["848", "New Jersey"],
["850", "Florida"],
["856", "New Jersey"],
["857", "Massachusetts"],
["858", "California"],
["859", "Kentucky"],
["860", "Connecticut"],
["862", "New Jersey"],
["863", "Florida"],
["864", "South Carolina"],
["865", "Tennessee"],
["867", "Yukon, NW Territories, Canada"],
["868", "Trinidad and Tobago"],
["869", "St. Kitts & Nevis"],
["870", "Arkansas"],
["872", "Illinois"],
["876", "Jamaica"],
["878", "Pennsylvania"],
["901", "Tennessee"],
["902", "Nova Scotia, Canada"],
["903", "Texas"],
["904", "Florida"],
["905", "Ontario, Canada"],
["906", "Michigan"],
["907", "Alaska"],
["908", "New Jersey"],
["909", "California"],
["910", "North Carolina"],
["912", "Georgia"],
["913", "Kansas"],
["914", "New York"],
["915", "Texas"],
["916", "California"],
["917", "New York"],
["918", "Oklahoma"],
["919", "North Carolina"],
["920", "Wisconsin"],
["925", "California"],
["928", "Arizona"],
["931", "Tennessee"],
["936", "Texas"],
["937", "Ohio"],
["939", "Puerto Rico"],
["940", "Texas"],
["941", "Florida"],
["947", "Michigan"],
["949", "California"],
["952", "Minnesota"],
["954", "Florida"],
["956", "Texas"],
["959", "Connecticut"],
["970", "Colorado"],
["971", "Oregon"],
["972", "Texas"],
["973", "New Jersey"],
["975", "Missouri"],
["978", "Massachusetts"],
["979", "Texas"],
["980", "North Carolina"],
["984", "North Carolina"],
["985", "Louisiana"],
["989", "Michigan"]
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.ACJSArray = function() {
var mylogger;
var oACDS,oACDS2;
var oAutoComp,oAutoComp2;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp.typeAhead = true;
oAutoComp.useShadow = true;
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete("statesinput2","statescontainer2", oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp2.typeAhead = true;
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJSArray.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: JS Function Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Function 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">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;padding:1em;}
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
#statesinput {position:absolute;width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%;}
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Function</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to an in-memory JavaScript function that
returns results in an array. The function queries against an in-memory object
literal of data that holds the 50 US states and their corresponding postal
abbreviations.</p>
<h3>AutoComplete</h3>
<p>Since the DataSource for this example is already loaded into memory,
queries should be very fast to return data. Therefore, the AutoComplete
instance is configured to have a query delay of zero seconds. The
AutoComplete instance is also configured to display two data fields in its
container: the state and its corresponding postal abbreviation. By setting
the alwaysShowContainer property to true and customizing appropriate CSS styles, the
container has been implemented to always be displayed. Custom event handlers
have been hooked into containerExpandEvent and containerCollapseEvent to
dynamically update the always open container"s contents.</p>
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
<h2>Find a state:</h2>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code" style="margin-top:15em;">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#statesmod {position:relative;padding:1em;}
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
#statesinput {position:absolute;width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%;}
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
<h2>Find a state:</h2>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function getStates(sQuery) {
aResults = [];
if(sQuery.length > 0) {
var charKey = sQuery.substring(0,1).toLowerCase();
var oResponse = dataset[charKey];
if(oResponse) {
for(var i = oResponse.length-1; i >= 0; i--) {
var sKey = oResponse[i].STATE;
var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
// Query found at the beginning of the key string for STARTSWITH
// returns an array of arrays where STATE is index=0, ABBR is index=1
if(sKeyIndex === 0) {
aResults.unshift([sKey, oResponse[i].ABBR]);
}
}
}
return aResults;
}
else { return null; }
}
var dataset =
{"a": [{"STATE" : "Alabama", "ABBR" : "AL"},
{"STATE" : "Alaska", "ABBR" : "AK"},
{"STATE" : "Arizona", "ABBR" : "AZ"},
{"STATE" : "Arkansas", "ABBR" : "AR"}],
"b" : [
],
"c" : [
{"STATE" : "California", "ABBR" : "CA"},
{"STATE" : "Colorado", "ABBR" : "CO"},
{"STATE" : "Connecticut", "ABBR" : "CT"}] // Entire dataset not shown
};
YAHOO.example.ACJSFunction = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate JS Function DataSource
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.maxResultsDisplayed = 8;
oAutoComp.useShadow = true;
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
},
// Define Custom Event handlers
myOnDataReturn: function(sType, aArgs) {
var oAutoComp = aArgs[0];
var sQuery = aArgs[1];
var aResults = aArgs[2];
if(aResults.length == 0) {
oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
}
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJSFunction.init);
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- 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/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 -->
<!-- In-memory JS dataset begins-->
<script type="text/javascript" src="./examples/autocomplete/js/states_jsfunction.js"></script>
<!-- In-memory JS dataset ends-->
<script type="text/javascript">
YAHOO.example.ACJSFunction = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate JS Function DataSource
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.maxResultsDisplayed = 8;
oAutoComp.useShadow = true;
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
},
// Define Custom Event handlers
myOnDataReturn: function(sType, aArgs) {
var oAutoComp = aArgs[0];
var sQuery = aArgs[1];
var aResults = aArgs[2];
if(aResults.length == 0) {
oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
}
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJSFunction.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
