-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyui.autocomplete.html
115 lines (105 loc) · 5.17 KB
/
yui.autocomplete.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>YUI Autocomplete Widget</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/assets/skins/sam/skin.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/utilities/utilities.js&2.8.1/build/datasource/datasource-min.js&2.8.1/build/autocomplete/autocomplete-min.js&2.8.1/build/event-mouseenter/event-mouseenter-min.js&2.8.1/build/selector/selector-min.js&2.8.1/build/event-delegate/event-delegate-min.js&2.8.1/build/container/container_core-min.js&2.8.1/build/menu/menu-min.js&2.8.1/build/button/button-min.js"></script>
<style type="text/css">
/* custom styles for inline instances */
.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
.yui-skin-sam .yui-ac-container { width:20em;left:0px;}
/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
#acBreakfast { z-index:9002; }
#acLunch { z-index:9001; }
#acDinner { z-index:9000; }
/* buttons */
.yui-ac .yui-button {vertical-align:middle;}
.yui-ac .yui-button button {background: url(http://developer.yahoo.com/yui/examples/autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
.yui-ac .open .yui-button button {background: url(http://developer.yahoo.com/yui/examples/autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
/* */
.yui-ac-input, .yui-button {font-size:1em;}
.acContainer {margin-bottom: .6em;}
</style>
<!-- AutoComplete widget -->
<script type="text/javascript" src="yui.autocomplete.js"></script>
<script type="text/javascript">
// A JSON object containing possible local data name and id values for the option menu
// Add additional Fields for forms with multiple autocomplete fields w/ different datasets
YAHOO.example.Data = {
acBreakfast: [
{ id: 1, name: "cereal" },
{ id: 2, name: "french toast" },
{ id: 3, name: "omelette" },
{ id: 4, name: "pancakes" },
{ id: 5, name: "waffles" }
],
acLunch: [
{ id: 6, name: "burrito" },
{ id: 7, name: "garden salad" },
{ id: 8, name: "hamburger" },
{ id: 9, name: "sandwich" },
{ id: 10, name: "tuna salad" }
],
acDinner: [
{ id: 11, name: "meatloaf" },
{ id: 12, name: "spaghetti" },
{ id: 13, name: "pot roast" },
{ id: 14, name: "roast chicken" },
{ id: 15, name: "steak" }
]
};
// Attach autocomplete
YAHOO.util.Event.onContentReady('acBreakfast', YAHOO.example.autocomplete);
YAHOO.util.Event.onContentReady('acLunch', YAHOO.example.autocomplete);
YAHOO.util.Event.onContentReady('acDinner', YAHOO.example.autocomplete);
// Show selected or entered values
var showAcValues = function(e) {
YAHOO.util.Event.preventDefault(e);
var oInput = YAHOO.util.Dom.getElementsByClassName('acInput', 'input');
var oID = YAHOO.util.Dom.getElementsByClassName('acID', 'input');
var oName = YAHOO.util.Dom.getElementsByClassName('acName', 'input');
var acDebug = 'The following form values have been set:';
for (var i = 0; i < oID.length; i++) {
acDebug = acDebug
+ '\n\nInput: ' + oInput[i].id
+ '\nID: ' + oID[i].value
+ '\nName: ' + oName[i].value;
}
alert(acDebug);
};
YAHOO.util.Event.addListener('acExampleForm', 'submit', showAcValues);
// Submit button
YAHOO.util.Event.onContentReady("acExampleForm", function () {
var oSubmitBtn = new YAHOO.widget.Button("acViewValues", { value: "acViewValuesvalue" });
});
</script>
</head>
<body class="yui-skin-sam">
<form action="#" method="post" id="acExampleForm">
<label for="Breakfast">What would you like for breakfast?</label>
<div id="acBreakfast" class="acContainer acToggle">
<input type="text" name="Breakfast" id="Breakfast" class="acInput">
<input type="hidden" name="BreakfastID" id="BreakfastID" class="acID">
<input type="hidden" name="BreakfastName" id="BreakfastName" class="acName">
</div>
<label for="Lunch">What would you like for lunch?</label>
<div id="acLunch" class="acContainer acToggle">
<input type="text" name="Lunch" id="Lunch" class="acInput">
<input type="hidden" name="LunchID" id="LunchID" class="acID">
<input type="hidden" name="LunchName" id="LunchName"class="acName" >
</div>
<label for="Dinner">What would you like for dinner? (hint: try m, p, r, or s)</label>
<div id="acDinner" class="acContainer">
<input type="text" name="Dinner" id="Dinner" class="acInput">
<input type="hidden" name="DinnerID" id="DinnerID" class="acID">
<input type="hidden" name="DinnerName" id="DinnerName"class="acName" >
</div>
<div>
<input type="submit" name="acViewFields" value="View Values" id="acViewValues">
</div>
</form>
</body>
</html>