JavaScript DHTML/YUI Library/AutoComplete

Содержание

1 AutoComplete has queryMatchSubset enabled for maximum cache performance
2 AutoComplete implementation points to a JavaScript array that is available in-memory
3 AutoComplete implementation points to an online script that serves a data as delimited plain text.
4 AutoComplete points to Yahoo! Search Web Services.
5 "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
6 Experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction
7 Searching Field A, Submitting Field B with itemSelectEvent
8 Tagging Example with alwaysShowContainer
9 The second AutoComplete instance does not enable queryMatchSubset so each typed letter results in a new request to the server.
10 This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource

AutoComplete has queryMatchSubset enabled for maximum cache performance

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for multiple stacked instances  */
#example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
#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>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Subset Matching</h1>
<div class="exampleIntro">
  <p>This example demonstrates AutoComplete"s <code>queryMatchSubset</code> property. The first instance of AutoComplete has <code>queryMatchSubset</code> 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.</p>
<p>The second AutoComplete instance does not enable <code>queryMatchSubset</code>
so each typed letter results in a new request to the server.</p>
<p>Note the custom CSS that is needed for stacking AutoComplete instances.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<div id="autocomplete_examples">
    <p><strong>Note:</strong> 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 &mdash; if you type a full, highly-specifc phrase (such as your name) you"ll probably get no results from the small dataset.</p>
  <h2>First AutoComplete instance enables queryMatchSubset:</h2>
  <div id="example1" class="autocomplete">
    <input id="ysearchinput1" type="text">
    <div id="ysearchcontainer1"></div>
  </div>
  <h2>Second AutoComplete instance does not enable queryMatchSubset:</h2>
  <div id="example2" class="autocomplete">
    <input id="ysearchinput2" type="text">
    <div id="ysearchcontainer2"></div>
  </div>
</div>
  
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

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

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
    width:15em; /* set width here or else widget will expand to fit its container */
    padding-bottom:2em;
}
</style>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Basic Local Data</h1>
<div class="exampleIntro">
  <p>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 <code>prehighlightClassName</code> and <code>useShadow</code> features, as well as pulling in the Animation utility, provides an ehanced visual user experience.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<h3>Enter a state:</h3>
<div id="myAutoComplete">
  <input id="myInput" type="text">
  <div id="myContainer"></div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

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

 
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<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">
#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">
<h1>Basic Remote Data</h1>
AutoComplete implementation points to an online script that serves a data as delimited plain text. 
<h3>Search our database:</h3>
<div id="myAutoComplete">
  <input id="myInput" type="text">
  <div id="myContainer"></div>
</div>
<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>

AutoComplete points to Yahoo! Search Web Services.

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<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 */
#ysearch { text-align:center; }
#ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
#ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Centering AutoComplete On a Page</h1>
<div class="exampleIntro">
  <p>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 <code>doBeforeExpandContainer</code> has been customized to position the container directly below the input field.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<form action="http://search.yahoo.ru/search">
    <div id="ysearch">
    <label>Yahoo! Search: </label>
    <input id="ysearchinput" type="text" name="p">
    <input id="ysearchsubmit" type="submit" value="Submit Query">
    <div id="ysearchcontainer"></div>
    </div>
</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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

"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

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<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 */
#bAutoComplete { z-index:9001; } 
#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>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Combobox, with CSS for Multiple Stacked Instances</h1>
<div class="exampleIntro">
  <p>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:</p>
<ul>
    <li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
    <li>the input field and container have been styled to support a button inline to the right</li>
</ul>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<h3>What would you like for breakfast?</h3>
<div id="bAutoComplete">
    <input id="bInput" type="text"> <span id="toggleB"></span>
  <div id="bContainer"></div>
</div>
<h3>What would you like for lunch?</h3>
<div id="lAutoComplete">
  <input id="lInput" type="text"> <span id="toggleL"></span>
  <div id="lContainer"></div>
</div>
<h3>What would you like for dinner?</h3>
<div id="dAutoComplete">
  <input id="dInput" type="text"> <span id="toggleD"></span>
  <div id="dContainer"></div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

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

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/
</style>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Configurations Dashboard</h1>
<div class="exampleIntro">
  <p>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.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<!-- AutoComplete begins -->
<h3>Search the Web Using Yahoo!"s Search API:</h3>
<div id="dashboard_autocomplete">
  <input id="dashboard_input" type="text" name="p">
  <div id="dashboard_container"></div>
</div>
<!-- AutoComplete ends -->
<!-- Panel begins -->
  
  <h3>Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:</h3>
    <form id="panel">
    
        <!-- The following is in a select to demonstrate the useIFrame feature -->
        <select><option>Customize configurations for AutoComplete</option></select>
        <div>
            <input id="animHoriz" type="checkbox">
            <label for="animHoriz">Animate Horizontally</label>
        </div>
        <div>
            <input id="animVert" type="checkbox" checked>
            <label for="animVert">Animate Vertically</label>
        </div>
        <div>
            <label for="animSpeedInput">Animation Speed: </label>
            <input id="animSpeedInput" type="text" size="2" value="0.3">
            <input id="animSpeed" type="button" value="Update">
        </div>
        <div>
            <input id="useShadow" type="checkbox">
            <label for="useShadow">Use Shadow</label>
        </div>
        <div>
            <input id="useIFrame" type="checkbox">
            <label for="useIFrame">Use IFrame</label>
        </div>
        <div>
            <input id="autoHighlight" type="checkbox" checked>
            <label for="autoHighlight">Automatically Highlight First Item</label>
        </div>
        <div>
            <input id="typeAhead" type="checkbox">
            <label for="typeAhead">Type Ahead</label>
        </div>
        <div>
            <input id="forceSelection" type="checkbox">
            <label for="forceSelection">Force a Selection</label>
        </div>
        <div>
            <label for="maxResultsDisplayedInput">Maximum Results: </label>
            <input id="maxResultsDisplayedInput" type="text" size="2" value="10">
            <input id="maxResultsDisplayed" type="button" value="Update">
        </div>
        <div>
            <label for="minQueryLengthInput">Minimum Query Length: </label>
            <input id="minQueryLengthInput" type="text" size="2" value="1">
            <input id="minQueryLength" type="button" value="Update">
        </div>
        <div>
            <label for="queryDelayInput">Query Delay: </label>
            <input id="queryDelayInput" type="text" size="2" value="0.2">
            <input id="queryDelay" type="button" value="Update">
        </div>
        <div>
            <label for="typeAheadDelayInput">TypeAhead Delay: </label>
            <input id="typeAheadDelayInput" type="text" size="2" value="0.2">
            <input id="typeAheadDelay" type="button" value="Update">
        </div>
        <div>
            <label for="delimCharInput">Delimiter Character(s) like ; or [";", ","]</label><br>
            <input id="delimCharInput" type="text" size="30" value="">
            <input id="delimChar" type="button" value="Update">
        </div>
        <div>
            <label for="highlightClassNameInput">Highlight Classname</label><br>
            <input id="highlightClassNameInput" type="text" size="30" value="yui-ac-highlight" maxlength="30">
            <input id="highlightClassName" type="button" value="Update">
        </div>
        <div>
            <label for="prehighlightClassNameInput">Pre-highlight Classname</label><br>
            <input id="prehighlightClassNameInput" type="text" size="30" value="" maxlength="30">
            <input id="prehighlightClassName" type="button" value="Update">
        </div>
        <div>
            <input id="allowBrowserAutocomplete" type="checkbox" checked>
            <label for="allowBrowserAutocomplete">Allow Browser Autocomplete</label>
        </div>
        <div>
            <input id="alwaysShowContainer" type="checkbox">
            <label for="alwaysShowContainer">Always Show Container</label>
        </div>
        <div>
            <label for="setHeaderInput">Set Header</label>
            <input id="setHeader" type="button" value="Update"><br>
            <textarea id="setHeaderInput" cols="25" rows="5"></textarea>
        </div>
        <div>
            <label for="setBodyInput">Set Body</label>
            <input id="setBody" type="button" value="Update"><br>
            <textarea id="setBodyInput" cols="25" rows="5"></textarea>
        </div>
        <div>
            <label for="setFooterInput">Set Footer</label>
            <input id="setFooter" type="button" value="Update"><br>
            <textarea id="setFooterInput" cols="25" rows="5"></textarea>
        </div>
    </form>
<!-- Panel ends -->
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 PST 2009 -->

Searching Field A, Submitting Field B with itemSelectEvent

 
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
    width:15em; /* set width here or else widget will expand to fit its container */
    padding-bottom:2em;
}
#mySubmit {
    position:absolute; left:15em; margin-left:1em; /* place the button next to the input */
}
</style>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
<div class="exampleIntro">
  <p>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.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<h3>Find a company in the accounts database:</h3>
<form id="myForm" action="#">
    <div id="myAutoComplete">
      <input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit"> 
      <div id="myContainer"></div>
    </div>
    <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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

Tagging Example with alwaysShowContainer

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
#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>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Tagging Example with alwaysShowContainer</h1>
<div class="exampleIntro">
  <p>This AutoComplete interaction uses the <code>alwaysShowContainer</code> 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.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<h3>Assign tags:</h3>
<div id="myAutoComplete">
  <input id="myInput" type="text">
  <div id="myContainer"></div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

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

 

<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for multiple stacked instances  */
#example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
#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>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Subset Matching</h1>
<div class="exampleIntro">
  <p>This example demonstrates AutoComplete"s <code>queryMatchSubset</code> property. The first instance of AutoComplete has <code>queryMatchSubset</code> 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.</p>
<p>The second AutoComplete instance does not enable <code>queryMatchSubset</code>
so each typed letter results in a new request to the server.</p>
<p>Note the custom CSS that is needed for stacking AutoComplete instances.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<div id="autocomplete_examples">
    <p><strong>Note:</strong> 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 &mdash; if you type a full, highly-specifc phrase (such as your name) you"ll probably get no results from the small dataset.</p>
  <h2>First AutoComplete instance enables queryMatchSubset:</h2>
  <div id="example1" class="autocomplete">
    <input id="ysearchinput1" type="text">
    <div id="ysearchcontainer1"></div>
  </div>
  <h2>Second AutoComplete instance does not enable queryMatchSubset:</h2>
  <div id="example2" class="autocomplete">
    <input id="ysearchinput2" type="text">
    <div id="ysearchcontainer2"></div>
  </div>
</div>
  
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

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

 
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright notice, this list of conditions and the
      following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    * Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
    * Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
    * Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
    * Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
    * Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>

<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
    width:40em; /* set width here or else widget will expand to fit its container */
    padding-bottom:2em;
}
</style>

<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">

<h1>Customizing Remote Requests</h1>
<div class="exampleIntro">
  <p>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 <code>queryDelay</code> 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.</p>
      
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE  -->
<h3>Yahoo! Search:</h3>
<div id="myAutoComplete">
  <input id="myInput" type="text">
  <div id="myContainer"></div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE  -->
</body>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:05 PST 2009 -->

JavaScript DHTML/YUI Library/AutoComplete

Содержание

AutoComplete has queryMatchSubset enabled for maximum cache performance

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

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

AutoComplete points to Yahoo! Search Web Services.

"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

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

Searching Field A, Submitting Field B with itemSelectEvent

Tagging Example with alwaysShowContainer

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

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

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты