update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
257
www/extras/yui/examples/autocomplete/ac_accessible.html
Normal file
257
www/extras/yui/examples/autocomplete/ac_accessible.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,93 @@
|
|||
<!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>Screenreader Accessibility</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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/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>Screenreader Accessibility</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete example demonstrates how to make the widget more screenreader accessible.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
|
||||
<div id="myAutoComplete">
|
||||
<label id="myInputLabel" for="myInput">Enter a state:</label> <input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.Accessibility = function() {
|
||||
// Set up DataSource and AutoComplete instances
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}});
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
|
||||
|
||||
// Set up span element with screenreader text
|
||||
var elLabel = YAHOO.util.Dom.get("myInputLabel"),
|
||||
origLabel = elLabel.innerHTML,
|
||||
screenreaderLabel = "<span style=\"position:absolute;left:-999em;\">Use the up and down arrow keys to navigate suggestions.</span>"
|
||||
|
||||
// Insert the screenreader text whenever user starts an AutoComplete interaction
|
||||
oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;});
|
||||
oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;});
|
||||
|
||||
// The typeAhead feature must also be set to true for screenreader support
|
||||
oAC.typeAhead = true;
|
||||
|
||||
// Turn off autoHighlight for less confusion
|
||||
oAC.autoHighlight = false;
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
261
www/extras/yui/examples/autocomplete/ac_accessible_log.html
Normal file
261
www/extras/yui/examples/autocomplete/ac_accessible_log.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Local Data</h1>
|
||||
|
|
@ -49,7 +51,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Enter a state:</h3>
|
||||
<label for="myInput">Enter a state:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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 Remote Data</title>
|
||||
|
||||
|
|
@ -38,7 +40,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Remote Data</h1>
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Search our database:</h3>
|
||||
<label for="myInput">Search our database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
<!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>Combo Box</title>
|
||||
<title>Combobox, with CSS for Multiple Stacked Instances</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
|
|
@ -21,7 +23,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
|
@ -48,31 +50,36 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Combo Box</h1>
|
||||
<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. There are also some CSS customizations which must be made to support multiple stacked AutoComplete instances, which this example demonstrates.</p>
|
||||
<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>
|
||||
<label for="bInput">What would you like for breakfast?</label>
|
||||
<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>
|
||||
<label for="lInput">What would you like for lunch?</label>
|
||||
<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>
|
||||
<label for="dInput">What would you like for dinner?</label>
|
||||
<div id="dAutoComplete">
|
||||
<input id="dInput" type="text"> <span id="toggleD"></span>
|
||||
<div id="dContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -28,7 +30,8 @@ body {
|
|||
<!--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*/
|
||||
#dashboard_autocomplete {margin:0 1em 0 0;width:50%;height:4em;}/* set width and height of widget here*/
|
||||
#dashboard_autocomplete label {display:block;color:#E76300;font-weight:bold;}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -36,21 +39,21 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<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>
|
||||
<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 look and 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">
|
||||
<label for="dashboard_input">Search the Web Using Yahoo!'s Search API:</label>
|
||||
<input id="dashboard_input" type="text" name="p">
|
||||
<div id="dashboard_container"></div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Find Photos on Flickr</title>
|
||||
|
||||
|
|
@ -58,7 +60,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Find Photos on Flickr</h1>
|
||||
|
|
@ -70,7 +72,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Find photos by tag and collect your selections:</h3>
|
||||
<label for="flickrinput">Find photos by tag and collect your selections:</label>
|
||||
<div id="flickrselections">
|
||||
<h5>Selections</h5>
|
||||
<div id="photos"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
<!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>Custom Function to Search Different Fields at Runtime</title>
|
||||
<title>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
|
|
@ -30,6 +32,9 @@ body {
|
|||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
.match {
|
||||
font-weight:bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -37,82 +42,137 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Custom Function to Search Different Fields at Runtime</h1>
|
||||
<h1>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses a FunctionDataSource that performs string matching against different fields of a two-dimensional array at runtime, depending on whether the input is a letter or a number. Since the data for this example is already loaded into memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. When the searched field is determined, the DataSource schema also needs to be updated on the fly. A custom formatter allows users to see both state and area code values for each result.</p>
|
||||
<p>This example uses a FunctionDataSource to perform string matching against multiple fields of a contacts database at runtime. Since the data for this example is loaded into local memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. A custom formatter allows users to see their search term within the result set. An itemSelectEvent handler is used to update the input field with a custom value and to populate a hidden form field with the selected contact's ID for eventually submitting back to a server.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Enter a state or an area code:</h3>
|
||||
<label for="myInput">Find a contact:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
<input id="myHidden" type="hidden">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.FnMultipleFields = function(){
|
||||
var allData = YAHOO.example.Data.arrayAreaCodesStates;
|
||||
var myContacts = [
|
||||
{id:0, fname:"Alice", lname:"Abrams", nname:"ace"},
|
||||
{id:1, fname:"Abraham", lname:"Axelrod", nname:"Abe"},
|
||||
{id:2, fname:"Bruce", lname:"Baxter", nname:null},
|
||||
{id:3, fname:"Robert", lname:"Brown", nname:"Bob"},
|
||||
{id:4, fname:"Carl", lname:"Carlson", nname:null},
|
||||
{id:5, fname:"Charlie", lname:"Chaplin", nname:"Chuck"},
|
||||
{id:6, fname:"Darla", lname:"Darling", nname:null},
|
||||
{id:7, fname:"David", lname:"Dashing", nname:"Dave"},
|
||||
{id:8, fname:"Egbert", lname:"Excellent", nname:null},
|
||||
{id:9, fname:"Engleberg", lname:"Humperdink", nname:null}
|
||||
];
|
||||
|
||||
// Track each interaction if it is against a state or an area code
|
||||
var nSearchField;
|
||||
|
||||
// Define a custom search function
|
||||
var searchAreaCodesAndStates = function(sQuery) {
|
||||
var allMatches = [],
|
||||
item, i, l;
|
||||
|
||||
// 0 for area code, 1 for state
|
||||
nSearchField = (YAHOO.lang.isNumber(sQuery*1)) ? 0 : 1;
|
||||
|
||||
for(i=0, l=allData.length; i<l; i++) {
|
||||
item = allData[i];
|
||||
|
||||
// State must be made case-insensitve and make the state return as index 0
|
||||
if(nSearchField) {
|
||||
if(item[nSearchField].toLowerCase().indexOf(sQuery.toLowerCase()) === 0) {
|
||||
allMatches[allMatches.length] = [item[1], item[0]];
|
||||
}
|
||||
}
|
||||
// Area codes are simpler
|
||||
else {
|
||||
if(item[nSearchField].indexOf(sQuery) === 0) {
|
||||
allMatches[allMatches.length] = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Define a custom search function for the DataSource
|
||||
var matchNames = function(sQuery) {
|
||||
// Case insensitive matching
|
||||
var query = sQuery.toLowerCase(),
|
||||
contact,
|
||||
i=0,
|
||||
l=myContacts.length,
|
||||
matches = [];
|
||||
|
||||
// States should be sorted alphabetically
|
||||
// Define schema on the fly (since the return order changes)
|
||||
if(nSearchField) {
|
||||
allMatches.sort();
|
||||
this.responseSchema = {fields: ["state", "areacode"]};
|
||||
// Match against each name of each contact
|
||||
for(; i<l; i++) {
|
||||
contact = myContacts[i];
|
||||
if((contact.fname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.lname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
|
||||
matches[matches.length] = contact;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.responseSchema = {fields: ["areacode", "state"]};
|
||||
}
|
||||
return allMatches;
|
||||
|
||||
return matches;
|
||||
};
|
||||
|
||||
// Use a FunctionDataSource
|
||||
var oDS = new YAHOO.util.FunctionDataSource(searchAreaCodesAndStates);
|
||||
var oDS = new YAHOO.util.FunctionDataSource(matchNames);
|
||||
oDS.responseSchema = {
|
||||
fields: ["id", "fname", "lname", "nname"]
|
||||
}
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.useShadow = true;
|
||||
oAC.resultTypeList = false;
|
||||
|
||||
|
||||
// Custom formatter to highlight the matching letters
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
return (sResultMatch + " (" + ((nSearchField) ? oResultData.areacode : oResultData.state) + ")");
|
||||
var query = sQuery.toLowerCase(),
|
||||
fname = oResultData.fname,
|
||||
lname = oResultData.lname,
|
||||
nname = oResultData.nname || "", // Guard against null value
|
||||
query = sQuery.toLowerCase(),
|
||||
fnameMatchIndex = fname.toLowerCase().indexOf(query),
|
||||
lnameMatchIndex = lname.toLowerCase().indexOf(query),
|
||||
nnameMatchIndex = nname.toLowerCase().indexOf(query),
|
||||
displayfname, displaylname, displaynname;
|
||||
|
||||
if(fnameMatchIndex > -1) {
|
||||
displayfname = highlightMatch(fname, query, fnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displayfname = fname;
|
||||
}
|
||||
|
||||
if(lnameMatchIndex > -1) {
|
||||
displaylname = highlightMatch(lname, query, lnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displaylname = lname;
|
||||
}
|
||||
|
||||
if(nnameMatchIndex > -1) {
|
||||
displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
|
||||
}
|
||||
else {
|
||||
displaynname = nname ? "(" + nname + ")" : "";
|
||||
}
|
||||
|
||||
return displayfname + " " + displaylname + " " + displaynname;
|
||||
|
||||
};
|
||||
|
||||
// Helper function for the formatter
|
||||
var highlightMatch = function(full, snippet, matchindex) {
|
||||
return full.substring(0, matchindex) +
|
||||
"<span class='match'>" +
|
||||
full.substr(matchindex, snippet.length) +
|
||||
"</span>" +
|
||||
full.substring(matchindex + snippet.length);
|
||||
};
|
||||
|
||||
// Define an event handler to populate a hidden form field
|
||||
// when an item gets selected and populate the input field
|
||||
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;
|
||||
|
||||
myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(myHandler);
|
||||
|
||||
return {
|
||||
fnSearch: searchAreaCodesAndStates,
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Custom Formatting, with a Proxyless Remote DataSource</title>
|
||||
|
||||
|
|
@ -18,13 +20,19 @@ body {
|
|||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/get/get-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:30em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
|
|
@ -41,44 +49,71 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Custom Formatting, with a Proxyless Remote DataSource</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Audio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
|
||||
<p>This AutoComplete instance uses a ScriptNodeDataSource to to find images from the YQL webservice without a proxy. The generateRequest() method must be customized to comply with the open API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
|
||||
|
||||
<p>A custom formatter function is defined in order to show thumbnail images in the results container.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.CustomFormatting.validateForm();">
|
||||
<h3>Yahoo! Audio Search:</h3>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text" name="p">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
<label for="myInput">Yahoo! Image Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text" name="p">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.CustomFormatting = (function(){
|
||||
// Instantiate DataSource
|
||||
var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/AudioSearchService/V1/artistSearch");
|
||||
var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?");
|
||||
oDS.responseSchema = {
|
||||
resultsList: "ResultSet.Result",
|
||||
fields: ["Name","Thumbnail"]
|
||||
resultsList: "query.results.result",
|
||||
fields: ["url", "thumbnail_url", "clickurl"]
|
||||
};
|
||||
|
||||
// Setting to default value for demonstration purposes.
|
||||
// The webservice needs to support execution of a callback function.
|
||||
oDS.scriptCallbackParam = "callback";
|
||||
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
|
||||
|
||||
// Bump up the query delay to reduce server load
|
||||
oAC.queryDelay = 1;
|
||||
|
||||
// The webservice needs custom parameters
|
||||
oAC.generateRequest = function(sQuery) {
|
||||
return "?appid=YahooDemo&output=json&artist=" + sQuery ;
|
||||
return "q=select%20*%20from%20search.images%20where%20query%3D%22" +
|
||||
sQuery +
|
||||
"%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json";
|
||||
};
|
||||
|
||||
// Result data passed as object for easy access from custom formatter.
|
||||
oAC.resultTypeList = false;
|
||||
// Customize formatter to show thumbnail images
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
if(oResultData.thumbnail_url) {
|
||||
img = "<img src=\""+ oResultData.thumbnail_url + "\">";
|
||||
}
|
||||
else {
|
||||
img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
|
||||
}
|
||||
return "<div class=\"result\">" + img + " <span class=\"name\">" + sResultMatch + "</span></div>";
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// Redirect to the img
|
||||
window.location.href = oData.clickurl;
|
||||
});
|
||||
|
||||
// Stub for form validation
|
||||
var validateForm = function() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -40,7 +42,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
|
||||
|
|
@ -52,8 +54,8 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Find a company in the accounts database:</h3>
|
||||
<form id="myForm" action="#">
|
||||
<label for="myInput">Find a company in the accounts database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -41,7 +43,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Tagging Example with alwaysShowContainer</h1>
|
||||
|
|
@ -53,7 +55,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Assign tags:</h3>
|
||||
<label for="myInput">Assign tags:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Customizing Remote Requests</title>
|
||||
|
||||
|
|
@ -27,6 +29,10 @@ body {
|
|||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:40em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
|
|
@ -38,7 +44,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Customizing Remote Requests</h1>
|
||||
|
|
@ -50,7 +56,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Yahoo! Search:</h3>
|
||||
<label for="myInput">Yahoo! Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Subset Matching</title>
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ body {
|
|||
#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*/
|
||||
label {color:#E76300;}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -38,7 +41,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Subset Matching</h1>
|
||||
|
|
@ -48,6 +51,8 @@ body {
|
|||
|
||||
<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>
|
||||
|
||||
|
|
@ -55,12 +60,12 @@ so each typed letter results in a new request to the server.</p>
|
|||
|
||||
<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 — 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>
|
||||
<label for="ysearchinput1">First AutoComplete instance enables queryMatchSubset:</label>
|
||||
<div id="example1" class="autocomplete">
|
||||
<input id="ysearchinput1" type="text">
|
||||
<div id="ysearchcontainer1"></div>
|
||||
</div>
|
||||
<h2>Second AutoComplete instance does not enable queryMatchSubset:</h2>
|
||||
<label for="ysearchinput2">Second AutoComplete instance does not enable queryMatchSubset:</label>
|
||||
<div id="example2" class="autocomplete">
|
||||
<input id="ysearchinput2" type="text">
|
||||
<div id="ysearchcontainer2"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -30,6 +32,7 @@ body {
|
|||
<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 */
|
||||
label { color:#E76300;font-weight:bold;}
|
||||
#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: */
|
||||
|
|
@ -39,13 +42,13 @@ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in s
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<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>
|
||||
<p>This example points to Yahoo! Search Web Services. Custom CSS rules have been applied to achieve the shrink-wrapped, centered search module.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -53,7 +56,7 @@ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in s
|
|||
|
||||
<form action="http://search.yahoo.com/search">
|
||||
<div id="ysearch">
|
||||
<label>Yahoo! Search: </label>
|
||||
<label for="ysearchinput">Yahoo! Search: </label>
|
||||
<input id="ysearchinput" type="text" name="p">
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
<div id="ysearchcontainer"></div>
|
||||
|
|
@ -75,12 +78,12 @@ YAHOO.example.Centered = function() {
|
|||
myAutoComp.useShadow = true;
|
||||
|
||||
// Keeps container centered
|
||||
myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
|
||||
/*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,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue