JavaScript DHTML/YUI Library/AutoComplete

Материал из Web эксперт
Версия от 10:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Содержание

AutoComplete has queryMatchSubset enabled for maximum cache performance

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Subset Matching</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css"> /* custom styles for multiple stacked instances */

  1. example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
  2. example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */

.autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/ </style>


</head> <body class=" yui-skin-sam">

Subset Matching

This example demonstrates AutoComplete"s queryMatchSubset property. The first instance of AutoComplete has queryMatchSubset enabled for maximum cache performance such that as you type, the query is searched within previously cached results. For best results, the DataSource should return a complete set of results when a single letter is queried such that subset matching will also return a complete set of results.

The second AutoComplete instance does not enable queryMatchSubset so each typed letter results in a new request to the server.

Note the custom CSS that is needed for stacking AutoComplete instances.

Note: The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you"ll probably get no results from the small dataset.

First AutoComplete instance enables queryMatchSubset:

   <input id="ysearchinput1" type="text">

Second AutoComplete instance does not enable queryMatchSubset:

   <input id="ysearchinput2" type="text">

<script type="text/javascript"> YAHOO.example.QueryMatchSubset = function(){ 

   var myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_flat.php");
   myDataSource.responseSchema = {
        recordDelim: "\n",
        fieldDelim: "\t"
   };
   myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
   myDataSource.maxCacheEntries = 60;
   // First AutoComplete
   var myAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1",myDataSource);
   myAutoComp1.queryMatchSubset = true;
   // Second AutoComplete
   var myAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", myDataSource);
   
   return {
       oDS: myDataSource,
       oAC1: myAutoComp1,
       oAC2: myAutoComp2
   }

}(); </script>

</body> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


AutoComplete implementation points to a JavaScript array that is available in-memory

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Basic Local Data</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css">

  1. myAutoComplete {
   width:15em; /* set width here or else widget will expand to fit its container */
   padding-bottom:2em;

} </style>


</head> <body class=" yui-skin-sam">

Basic Local Data

This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. Enabling the prehighlightClassName and useShadow features, as well as pulling in the Animation utility, provides an ehanced visual user experience.

Enter a state:

 <input id="myInput" type="text">

<script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.example.BasicLocal = function() { 

   // Use a LocalDataSource
   var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
   // Optional to define fields for single-dimensional array
   oDS.responseSchema = {fields : ["state"]};
   // Instantiate the AutoComplete
   var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
   oAC.prehighlightClassName = "yui-ac-prehighlight";
   oAC.useShadow = true;
   
   return {
       oDS: oDS,
       oAC: oAC
   };

}(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


AutoComplete implementation points to an online script that serves a data as delimited plain text.

   <source lang="html4strict">

<head> <title>Basic Remote Data</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script> <style type="text/css">

  1. myAutoComplete {
   width:25em; /* set width here or else widget will expand to fit its container */
   padding-bottom:2em;

} </style> </head> <body class=" yui-skin-sam">

Basic Remote Data

AutoComplete implementation points to an online script that serves a data as delimited plain text.

Search our database:

 <input id="myInput" type="text">

<script type="text/javascript"> YAHOO.example.BasicRemote = function() { 

   // Use an XHRDataSource
   var oDS = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_flat.php");
   // Set the responseType
   oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
   // Define the schema of the delimited results
   oDS.responseSchema = {
       recordDelim: "\n",
       fieldDelim: "\t"
   };
   // Enable caching
   oDS.maxCacheEntries = 5;
   // Instantiate the AutoComplete
   var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
   
   return {
       oDS: oDS,
       oAC: oAC
   };

}(); </script> </body> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


AutoComplete points to Yahoo! Search Web Services.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Centering AutoComplete On a Page</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/json/json-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css"> /* custom styles for centered example */ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */

  1. ysearch { text-align:center; }
  2. ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
  3. ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */

</style>

</head> <body class=" yui-skin-sam">

Centering AutoComplete On a Page

This example points to Yahoo! Search Web Services. To achieve the shrink-wrapped, centered search module, custom CSS rules have been applied, and the method doBeforeExpandContainer has been customized to position the container directly below the input field.

<form action="http://search.yahoo.ru/search"> 

   <label>Yahoo! Search: </label>
   <input id="ysearchinput" type="text" name="p">
   <input id="ysearchsubmit" type="submit" value="Submit Query">

</form>

<script type="text/javascript"> YAHOO.example.Centered = function() { 

   var myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_proxy.php?output=json&");
   myDataSource.responseSchema = {
       resultsList: "ResultSet.Result",
       fields: ["Title"]
   };
   // Instantiate AutoComplete
   var myAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", myDataSource);
   myAutoComp.queryMatchContains = true;
   myAutoComp.queryQuestionMark = false;
   myAutoComp.useShadow = true;
   
   // Keeps container centered
   myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
       var pos = YAHOO.util.Dom.getXY(oTextbox);
       pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
       YAHOO.util.Dom.setXY(oContainer,pos);
       return true;
   };
   
   return {
       oDS: myDataSource,
       oAC: myAutoComp
   };

}(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


"combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Combobox, with CSS for Multiple Stacked Instances</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css"> /* custom styles for inline instances */ .yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;} .yui-skin-sam .yui-ac-container { width:20em;left:0px;} /* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */

  1. bAutoComplete { z-index:9001; }
  2. lAutoComplete { z-index:9000; }

/* buttons */ .yui-ac .yui-button {vertical-align:middle;} .yui-ac .yui-button button {background: url(yui_2.7.0b-assets/autocomplete-assets/img/ac-arrow-rt.png) center center no-repeat } .yui-ac .open .yui-button button {background: url(yui_2.7.0b-assets/autocomplete-assets/img/ac-arrow-dn.png) center center no-repeat} </style>


</head> <body class=" yui-skin-sam">

Combobox, with CSS for Multiple Stacked Instances

This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. Please note the following custom CSS:

  • z-index has been applied to support multiple vertically stacked AutoComplete instances
  • the input field and container have been styled to support a button inline to the right

What would you like for breakfast?

   <input id="bInput" type="text">

What would you like for lunch?

 <input id="lInput" type="text">

What would you like for dinner?

 <input id="dInput" type="text">

<script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.example.rubobox = function() { 

   // Instantiate DataSources
   var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
   var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
   var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);
   // Instantiate AutoCompletes
   var oConfigs = {
       prehighlightClassName: "yui-ac-prehighlight",
       useShadow: true,
       queryDelay: 0,
       minQueryLength: 0,
       animVert: .01
   }
   var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
   var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
   var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
   
   // Breakfast combobox
   var bToggler = YAHOO.util.Dom.get("toggleB");
   var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
   var toggleB = function(e) {
       //YAHOO.util.Event.stopEvent(e);
       if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
           YAHOO.util.Dom.addClass(bToggler, "open")
       }
       
       // Is open
       if(bAC.isContainerOpen()) {
           bAC.collapseContainer();
       }
       // Is closed
       else {
           bAC.getInputEl().focus(); // Needed to keep widget active
           setTimeout(function() { // For IE
               bAC.sendQuery("");
           },0);
       }
   }
   oPushButtonB.on("click", toggleB);
   bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
   
   // Lunch combobox
   var lToggler = YAHOO.util.Dom.get("toggleL");
   var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
   var toggleL = function(e) {
       //YAHOO.util.Event.stopEvent(e);
       if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
           YAHOO.util.Dom.addClass(lToggler, "open")
       }
       
       // Is open
       if(lAC.isContainerOpen()) {
           lAC.collapseContainer();
       }
       // Is closed
       else {
           lAC.getInputEl().focus(); // Needed to keep widget active
           setTimeout(function() { // For IE
               lAC.sendQuery("");
           },0);
       }
   }
   oPushButtonL.on("click", toggleL);
   lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});
   // Dinner combobox
   var dToggler = YAHOO.util.Dom.get("toggleD");
   var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
   var toggleD = function(e) {
       //YAHOO.util.Event.stopEvent(e);
       if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
           YAHOO.util.Dom.addClass(dToggler, "open")
       }
       
       // Is open
       if(dAC.isContainerOpen()) {
           dAC.collapseContainer();
       }
       // Is closed
       else {
           dAC.getInputEl().focus(); // Needed to keep widget active
           setTimeout(function() { // For IE
               dAC.sendQuery("");
           },0);
       }
   }
   oPushButtonD.on("click", toggleD);
   dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});
   return {
       bDS: bDS,
       bAC: bAC,
       lDS: lDS,
       lAC: lAC,
       dDS: dDS,
       dAC: dAC
   };

}(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Configurations Dashboard</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css"> /* custom styles for this example */

  1. dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/

</style>


</head> <body class=" yui-skin-sam">

Configurations Dashboard

This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes feel in the browser.


Search the Web Using Yahoo!"s Search API:

 <input id="dashboard_input" type="text" name="p">


Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:

   <form id="panel">
   
       
       <select><option>Customize configurations for AutoComplete</option></select>

           <input id="animHoriz" type="checkbox">
           <label for="animHoriz">Animate Horizontally</label>

           <input id="animVert" type="checkbox" checked>
           <label for="animVert">Animate Vertically</label>

           <label for="animSpeedInput">Animation Speed: </label>
           <input id="animSpeedInput" type="text" size="2" value="0.3">
           <input id="animSpeed" type="button" value="Update">

           <input id="useShadow" type="checkbox">
           <label for="useShadow">Use Shadow</label>

           <input id="useIFrame" type="checkbox">
           <label for="useIFrame">Use IFrame</label>

           <input id="autoHighlight" type="checkbox" checked>
           <label for="autoHighlight">Automatically Highlight First Item</label>

           <input id="typeAhead" type="checkbox">
           <label for="typeAhead">Type Ahead</label>

           <input id="forceSelection" type="checkbox">
           <label for="forceSelection">Force a Selection</label>

           <label for="maxResultsDisplayedInput">Maximum Results: </label>
           <input id="maxResultsDisplayedInput" type="text" size="2" value="10">
           <input id="maxResultsDisplayed" type="button" value="Update">

           <label for="minQueryLengthInput">Minimum Query Length: </label>
           <input id="minQueryLengthInput" type="text" size="2" value="1">
           <input id="minQueryLength" type="button" value="Update">

           <label for="queryDelayInput">Query Delay: </label>
           <input id="queryDelayInput" type="text" size="2" value="0.2">
           <input id="queryDelay" type="button" value="Update">

           <label for="typeAheadDelayInput">TypeAhead Delay: </label>
           <input id="typeAheadDelayInput" type="text" size="2" value="0.2">
           <input id="typeAheadDelay" type="button" value="Update">

           <label for="delimCharInput">Delimiter Character(s) like ; or [";", ","]</label>

           <input id="delimCharInput" type="text" size="30" value="">
           <input id="delimChar" type="button" value="Update">

           <label for="highlightClassNameInput">Highlight Classname</label>

           <input id="highlightClassNameInput" type="text" size="30" value="yui-ac-highlight" maxlength="30">
           <input id="highlightClassName" type="button" value="Update">

           <label for="prehighlightClassNameInput">Pre-highlight Classname</label>

           <input id="prehighlightClassNameInput" type="text" size="30" value="" maxlength="30">
           <input id="prehighlightClassName" type="button" value="Update">

           <input id="allowBrowserAutocomplete" type="checkbox" checked>
           <label for="allowBrowserAutocomplete">Allow Browser Autocomplete</label>

           <input id="alwaysShowContainer" type="checkbox">
           <label for="alwaysShowContainer">Always Show Container</label>

           <label for="setHeaderInput">Set Header</label>
           <input id="setHeader" type="button" value="Update">

           <textarea id="setHeaderInput" cols="25" rows="5"></textarea>

           <label for="setBodyInput">Set Body</label>
           <input id="setBody" type="button" value="Update">

           <textarea id="setBodyInput" cols="25" rows="5"></textarea>

           <label for="setFooterInput">Set Footer</label>
           <input id="setFooter" type="button" value="Update">

           <textarea id="setFooterInput" cols="25" rows="5"></textarea>

   </form>

<script type="text/javascript"> YAHOO.example.Dashboard = function() { return { 

   myDataSource: null,
   myAutoComp: null,
   
   // Initialize widgets and the dashboard
   init:  function() {
       // DataSource
       this.myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_flat.php");
       this.myDataSource.responseSchema = {
            recordDelim: "\n",
            fieldDelim: "\t"
       };
       this.myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
       // AutoComplete
       this.myAutoComp = new YAHOO.widget.AutoComplete("dashboard_input","dashboard_container", this.myDataSource);
       // IFrame workaround for IE
       var ua = navigator.userAgent.toLowerCase();
       if(YAHOO.env.ua.ie < 7) {
           this.myAutoComp.useIFrame = true;
           YAHOO.util.Dom.get("useIFrame").checked = true;
       }
       // Dashboard DOM event handling (assign scope to the HTML Element)
       YAHOO.util.Event.addListener("animHoriz","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("animVert","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("useShadow","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("useIFrame","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("autoHighlight","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("typeAhead","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("forceSelection","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("allowBrowserAutocomplete","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("alwaysShowContainer","click",this.handleCheckboxEvent,this);
       YAHOO.util.Event.addListener("animSpeed","click",this.handleNumberInputEvent,this);
       YAHOO.util.Event.addListener("maxResultsDisplayed","click",this.handleNumberInputEvent,this);
       YAHOO.util.Event.addListener("minQueryLength","click",this.handleNumberInputEvent,this);
       YAHOO.util.Event.addListener("queryDelay","click",this.handleNumberInputEvent,this);
       YAHOO.util.Event.addListener("typeAheadDelay","click",this.handleNumberInputEvent,this);
       
       YAHOO.util.Event.addListener("delimChar","click",this.handleDelimiterInputEvent,this);
       YAHOO.util.Event.addListener("highlightClassName","click",this.handleTextInputEvent,this);
       YAHOO.util.Event.addListener("prehighlightClassName","click",this.handleTextInputEvent,this);
       YAHOO.util.Event.addListener("setHeader","click",this.handleTextareaEvent,this);
       YAHOO.util.Event.addListener("setBody","click",this.handleTextareaEvent,this);
       YAHOO.util.Event.addListener("setFooter","click",this.handleTextareaEvent,this);
   },
   
   // For valid inputs
   updateValue: function(property, value) {
       this.myAutoComp[property] = value;
       this.logSuccess(property);
   },
   // For invalid inputs
   revertInput: function(property) {
       YAHOO.util.Dom.get(property+"Input").value = this.myAutoComp[property];
       this.logFailure(property);
   },
   
   // Log success message
   logSuccess: function(property) {
       YAHOO.log("Updated " + property + " to " + this.myAutoComp[property] + ".", "info", "example");
   },
   // Log failure message
   logFailure: function(property, error) {
       YAHOO.log("Could not update " + property + ".", "warn","example");
   },
   // DOM event handler (scope assigned to the HTML Element)
   handleCheckboxEvent: function(e, oSelf) {
       var property = this.id;
       oSelf.updateValue(property, this.checked);
       
       if(oSelf.myAutoComp.useShadow && oSelf.myAutoComp.alwaysShowContainer) {
           YAHOO.log("The AutoComplete properties useShadow and alwaysShowContainer should not be enabled concurrently.","warn","example")
       }
   },
   
   // DOM event handler (scope assigned to the HTML Element)
   handleNumberInputEvent: function(e, oSelf) {
       var property = this.id;
       
       // Validate input
       var nValue = YAHOO.util.Dom.get(property+"Input").value*1;
       if(YAHOO.lang.isNumber(nValue)) {
           oSelf.updateValue(property, nValue);
       }
       else {
           oSelf.revertInput(property);
       }
   },
   
   // DOM event handler (scope assigned to the HTML Element)
   handleDelimiterInputEvent: function(e, oSelf) {
       var property = this.id;
       
       // Validate input
       var sValue = YAHOO.util.Dom.get(property+"Input").value;
       if((sValue.indexOf("[") == 0) &&
               (sValue.indexOf("]") == sValue.length-1) &&
               (sValue.indexOf("<") < 0) &&
               (sValue.indexOf(">") < 0)) {
           // Ok to turn into an array
           try {
               sValue = eval(sValue);
           }
           catch(e) {
               // Not ok
               oSelf.revertInput(property);
               return;
           }
       }
       else if(sValue.length !== 1){
           // Not ok
           oSelf.revertInput(property);
           return;
       }
       oSelf.updateValue(property, sValue);
   },
   
   // DOM event handler (scope assigned to the HTML Element)
   handleTextInputEvent: function(e, oSelf) {
       var property = this.id;
       oSelf.updateValue(property, YAHOO.util.Dom.get(property+"Input").value);
   },
   // DOM event handler (scope assigned to the HTML Element)
   handleTextareaEvent: function(e, oSelf) {
       var method = this.id;
       var value = YAHOO.util.Dom.get(method+"Input").value;
       switch(method) {
           case "setHeader":
               oSelf.myAutoComp.setHeader(value);
               break
           case "setBody":
               oSelf.myAutoComp.setBody(value);
               break;
           case "setFooter":
               oSelf.myAutoComp.setFooter(value);
               break;
       }
       YAHOO.log("Called " + method + "() with " + value, "info", "example");
   }

}; }(); YAHOO.util.Event.addListener(this,"load",YAHOO.example.Dashboard.init, YAHOO.example.Dashboard, true); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Searching Field A, Submitting Field B with itemSelectEvent

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Searching Field A, Submitting Field B with itemSelectEvent</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css">

  1. myAutoComplete {
   width:15em; /* set width here or else widget will expand to fit its container */
   padding-bottom:2em;

}

  1. mySubmit {
   position:absolute; left:15em; margin-left:1em; /* place the button next to the input */

} </style>


</head> <body class=" yui-skin-sam">

Searching Field A, Submitting Field B with itemSelectEvent

This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. The data consists of an account name, and an account number. The AutoComplete allows the user to search by name, but by subscribing to the itemSelectEvent Custom Event, populates a hidden form field with the ID, which the server would need for processing the hypothetical submission.

Find a company in the accounts database:

<form id="myForm" action="#"> 

     <input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit"> 

   <input id="myHidden" type="hidden">

</form> <script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.example.ItemSelectHandler = function() { 

   // Use a LocalDataSource
   var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.accounts);
   oDS.responseSchema = {fields : ["name", "id"]};
   // Instantiate the AutoComplete
   var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
   oAC.resultTypeList = false;
   
   // Define an event handler to populate a hidden form field
   // when an item gets selected
   var myHiddenField = YAHOO.util.Dom.get("myHidden");
   var myHandler = function(sType, aArgs) {
       var myAC = aArgs[0]; // reference back to the AC instance
       var elLI = aArgs[1]; // reference to the selected LI element
       var oData = aArgs[2]; // object literal of selected item"s result data
       
       // update hidden form field with the selected item"s ID
       myHiddenField.value = oData.id;
   };
   oAC.itemSelectEvent.subscribe(myHandler);
   
   // Rather than submit the form,
   // alert the stored ID instead
   var onFormSubmit = function(e, myForm) {
       YAHOO.util.Event.preventDefault(e);
       alert("Company ID: " + myHiddenField.value);
   };
   YAHOO.util.Event.addListener(YAHOO.util.Dom.get("myForm"), "submit", onFormSubmit);
   return {
       oDS: oDS,
       oAC: oAC
   };

}(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Tagging Example with alwaysShowContainer

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Tagging Example with alwaysShowContainer</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css">

  1. myAutoComplete {
   width:20em; /* set width here or else widget will expand to fit its container */
   padding-bottom:20em; /* allow enough real estate for the container */

} .yui-skin-sam .yui-ac-content { /* set scrolling */ 

   max-height:18em;overflow:auto;overflow-x:hidden; /* set scrolling */
   _height:18em; /* ie6 */

} </style>


</head> <body class=" yui-skin-sam">

Tagging Example with alwaysShowContainer

This AutoComplete interaction uses the alwaysShowContainer feature to allow users to find and select tags. Showing the set of previously used tags as a visual enhancement discourages unneccessary duplication of similar tags. As is common for tagging, comma- and semi-colon delimiters have also been enabled. Note that an initial query is needed on page load to get the container to display the first time with the full set of data. Since the container is meant to stay open, CSS is used to give it proper real estate on the page, including scrolling to show a potentially long list of tags.

Assign tags:

 <input id="myInput" type="text">

<script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.example.TagsAlwaysShow = function() { 

   // Use a LocalDataSource
   var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.tags);
   // Optional to define fields for single-dimensional array
   oDS.responseSchema = {fields : ["tag"]};
   // Instantiate the AutoComplete
   var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
   oAC.alwaysShowContainer = true;
   oAC.minQueryLength = 0; // Can be 0, which will return all results
   oAC.maxResultsDisplayed = 100; // Show more results, scrolling is enabled via CSS
   oAC.delimChar = [",",";"]; // Enable comma and semi-colon delimiters
   oAC.autoHighlight = false; // Auto-highlighting interferes with adding new tags
   oAC.sendQuery("");
   
   // Populate list to start a new interaction
   oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
       oAC.sendQuery("");
   });
   
   return {
       oDS: oDS,
       oAC: oAC
   };

}(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


The second AutoComplete instance does not enable queryMatchSubset so each typed letter results in a new request to the server.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Subset Matching</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css"> /* custom styles for multiple stacked instances */

  1. example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
  2. example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */

.autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/ </style>


</head> <body class=" yui-skin-sam">

Subset Matching

This example demonstrates AutoComplete"s queryMatchSubset property. The first instance of AutoComplete has queryMatchSubset enabled for maximum cache performance such that as you type, the query is searched within previously cached results. For best results, the DataSource should return a complete set of results when a single letter is queried such that subset matching will also return a complete set of results.

The second AutoComplete instance does not enable queryMatchSubset so each typed letter results in a new request to the server.

Note the custom CSS that is needed for stacking AutoComplete instances.

Note: The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you"ll probably get no results from the small dataset.

First AutoComplete instance enables queryMatchSubset:

   <input id="ysearchinput1" type="text">

Second AutoComplete instance does not enable queryMatchSubset:

   <input id="ysearchinput2" type="text">

<script type="text/javascript"> YAHOO.example.QueryMatchSubset = function(){ 

   var myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_flat.php");
   myDataSource.responseSchema = {
        recordDelim: "\n",
        fieldDelim: "\t"
   };
   myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
   myDataSource.maxCacheEntries = 60;
   // First AutoComplete
   var myAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1",myDataSource);
   myAutoComp1.queryMatchSubset = true;
   // Second AutoComplete
   var myAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", myDataSource);
   
   return {
       oDS: myDataSource,
       oAC1: myAutoComp1,
       oAC2: myAutoComp2
   }

}(); </script>

</body> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Customizing Remote Requests</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>


<style type="text/css">

  1. myAutoComplete {
   width:40em; /* set width here or else widget will expand to fit its container */
   padding-bottom:2em;

} </style>


</head> <body class=" yui-skin-sam">

Customizing Remote Requests

This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource. Since the third-party API requires certain application-specific paramaters to be passed in, the generateRequest() method has been redefined to append these special values. The queryDelay paramater has been increased to account for the large data payload returned by the Yahoo! Search webservice, so as to reduce throttle client-side processing.

Yahoo! Search:

 <input id="myInput" type="text">

<script type="text/javascript"> YAHOO.example.RemoteCustomRequest = function() { 

   // Use an XHRDataSource
   var oDS = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_proxy.php");
   // Set the responseType
   oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
   // Define the schema of the JSON results
   oDS.responseSchema = {
       resultsList : "ResultSet.Result",
       fields : ["Title"]
   };
   // Instantiate the AutoComplete
   var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
   // Throttle requests sent
   oAC.queryDelay = .5;
   // The webservice needs additional parameters
   oAC.generateRequest = function(sQuery) {
       return "?output=json&results=100&query=" + sQuery ;
   };
   
   return {
       oDS: oDS,
       oAC: oAC
   };

}(); </script>

</body> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/AutoComplete&oldid=4007»