JavaScript DHTML/Ajax Layer/AutoComplete Widget
Содержание
- 1 Ajax 4 Suggest
- 2 Autocompleter functional tes
- 3 script.aculo.us Autocompleter functional test file
- 4 script.aculo.us Autocompleter functional test file
- 5 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services
- 6 <img src="./examples/autocomplete/img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Yahoo! Search Web Services
- 7 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat Data Custom Script
- 7.1 DataSource
- 7.2 AutoComplete
- 7.3 Yahoo! Search (1 sec query delay):
- 7.4 Yahoo! Search (0.5 sec query delay):
- 7.5 Yahoo! Search (0 sec query delay):
- 7.6 Yahoo! Search (1 sec query delay):
- 7.7 Yahoo! Search (0.5 sec query delay):
- 7.8 Yahoo! Search (0 sec query delay):
- 7.9 AutoComplete Widget :: Customizable Example
- 8 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Customizable Example
- 9 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Flickr Web Services
- 10 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Array
- 11 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Function
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
<source lang="html4strict">
<!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>
script.aculo.us Autocompleter functional test file
This is an incremental Ajax autocompleter. Type something, then type a comma, than type more.
Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac1","ac1update","_autocomplete_result.html", { tokens: ","} );
</script>
Non-incremental Ajax autocompleter.
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac2","ac2update","_autocomplete_result.html");
</script>
Non-incremental Ajax autocompleter.
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac3","ac3update","_autocomplete_result.html");
</script>
Local incremental array autocompleter ac4
with full-search. Type "Jac", hit enter a few
times, type "gne".
<textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>
<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>
Local incremental array autocompleter ac5
with fixed height and scrollbar. Type "Jac", hit enter a few
times, type "gne".
<input id="ac5" type="text" autocomplete="off"/>
<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>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
script.aculo.us Autocompleter functional test file
Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" type="text"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac1","ac1update","_autocomplete_result.html");
</script>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac2","ac2update","_autocomplete_result.html",{parameters:"a=b&b=c"});
</script>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):
<input id="ac3" type="text"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac3","ac3update","_autocomplete_result.html",{select:"selectme"});
</script>
<select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>
Autocompleter ac4 (autoselects option if single single option is returned):
<input id="ac4" type="text"/>
<script type="text/javascript" language="javascript" charset="utf-8">
new Ajax.Autocompleter("ac4","ac4update","_autocomplete_result_single.html",{select:"selectme",autoSelect:true});
</script>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
Yahoo! Search
<input id="ysearchinput">
<input id="ysearchsubmit" type="submit" value="Submit Query">
</form>
DataSource
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.
AutoComplete
This AutoComplete instance uses only default configuration values.
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
Yahoo! Search
<input id="ysearchinput">
<input id="ysearchsubmit" type="submit" value="Submit Query">
</form>
</textarea>
JavaScript:
<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>
<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>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Basic XML Implementation
<source lang="html4strict">
<!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>
<img src="./examples/autocomplete/img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Yahoo! Search Web Services
DataSource
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.
AutoComplete
This AutoComplete instance uses only default configuration values.
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
Yahoo! Search
<input id="ysearchinput">
</form>
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
Yahoo! Search
<input id="ysearchinput">
</form>
</textarea>
JavaScript:
<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>
<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>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Complex Flat-data Implementation
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat Data Custom Script
DataSource
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.
AutoComplete
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.
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
Yahoo! Search (1 sec query delay):
<input id="ysearchinput0">
Yahoo! Search (0.5 sec query delay):
<input id="ysearchinput1">
Yahoo! Search (0 sec query delay):
<input id="ysearchinput2">
</form>
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
Yahoo! Search (1 sec query delay):
<input id="ysearchinput0">
Yahoo! Search (0.5 sec query delay):
<input id="ysearchinput1">
Yahoo! Search (0 sec query delay):
<input id="ysearchinput2">
</form>
</textarea>
JavaScript:
<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 = ["nQuantity,"
sKeyQuery,
"",
sKeyRemainder,
" 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 = ["nQuantity,"
sKeyQuery,
"",
sKeyRemainder,
" 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>
<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>
<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 = ["nQuantity,"
sKeyQuery,
"",
sKeyRemainder,
" 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 = ["nQuantity,"
sKeyQuery,
"",
sKeyRemainder,
" 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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Customizable Example
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Customizable Example
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.
<form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
Customize your own AutoComplete widget:
<input id="custominput">
</form>
<form id="panel">
<select><option>Customize configurations for AutoComplete</option></select>
<input id="animhoriz" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
<label for="animhoriz">Animate Horizontally</label>
<input id="animvert" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
<label for="animvert">Animate Vertically</label>
<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();">
<input id="useshadow" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
<label for="useshadow">Use Shadow</label>
<input id="useiframe" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
<label for="useiframe">Use IFrame</label>
<input id="typeahead" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
<label for="typeahead">Type Ahead</label>
<input id="forceselection" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
<label for="forceselection">Force a Selection</label>
<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();">
<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();"
<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();">
<label for="delimchar">Array of Delimiter Character(s)</label>
<input id="delimchar" type="text" size="30" value=""> <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
<label for="highlightclass">Highlight Classname</label>
<input id="highlightclass" type="text" size="30" value="yui-ac-highlight" maxlength="30"> <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHighlight();">
<label for="prehighlightclass">Pre-highlight Classname</label>
<input id="prehighlightclass" type="text" size="30" value="" maxlength="30"> <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
<input id="allowbrowserautocomplete" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);" checked>
<label for="allowbrowserautocomplete">Allow Browser Autocomplete</label>
<input id="alwaysshowcontainer" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
<label for="alwaysshowcontainer">Always Show Container</label>
<label for="header">Set Header</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHeader();">
<textarea id="header" cols="25" rows="5"></textarea>
<label for="body">Set Body</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateBody();">
<textarea id="body" cols="25" rows="5"></textarea>
<label for="footer">Set Footer</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateFooter();">
<textarea id="footer" cols="25" rows="5"></textarea>
</form>
<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>
<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>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: Customized XML Implementation
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Flickr Web Services
DataSource
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.
AutoComplete
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.
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
Enter Flickr tags to find a photo (separate with commas):
<input id="flickrinput">
</form>
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
Enter Flickr tags to find a photo (separate with commas):
<input id="flickrinput">
</form>
</textarea>
JavaScript:
<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>
<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>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: JS Array Example
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Array
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
Find a state:
<input id="statesinput">
Find an area code
<input id="statesinput2">
</form>
DataSource
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.
AutoComplete
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.
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.
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
Find a state:
<input id="statesinput">
Find an area code
<input id="statesinput2">
</form>
</textarea>
JavaScript:
<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>
<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>
<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>
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
AutoComplete Widget :: JS Function Example
<source lang="html4strict">
<!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>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Function
DataSource
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.
AutoComplete
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.
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
Find a state:
<input id="statesinput">
</form>
Sample Code
CSS:
<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>
Markup:
<textarea name="code" class="HTML" cols="60" rows="1">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
Find a state:
<input id="statesinput">
</form>
</textarea>
JavaScript:
<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(" 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(" }
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody(" },
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJSFunction.init);
</textarea>
<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>
<script type="text/javascript" src="./examples/autocomplete/js/states_jsfunction.js"></script>
<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(" 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(" }
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody(" },
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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
