iem_shop
view | history | commit | commitdiff
wangtengyu
2018-12-07 f459412e0dac4ed94106da043b4c6f8576bfe496
commit | author | age
19351a 1 /* $Id : auto_complete.js 4865 2007-01-31 14:04:10Z paulgao $ */
B 2
3 function autoComplete(obj, hidden, url, callback)
4 {
5   this.borderStyle = '1px solid #000';
6   this.highlight = '#000080';
7   this.highlightText = '#FFF';
8   this.background = '#FFF';
9   this.params = '';
10
11   var textbox = obj;
12   var hidden = hidden;
13   var oldValue = '';
14   var flag = false;
15   var url = url;
16
17   this.call = function()
18   {
19     if (flag)
20     {
21       flag = false;
22       return;
23     }
24
25     if (url == '')
26     {
27       return;
28     }
29
30     if (oldValue != '' && oldValue == textbox.value)
31     {
32       return;
33     }
34     else
35     {
36       oldValue = textbox.value;
37     }
38
39     if (textbox.value != '')
40     {
41       Transport.run(url, "arg=" + textbox.value, this.show, 'get', 'json');
42     }
43     else
44     {
45       var layer = document.getElementById('AC_layer');
46
47       if (layer)
48       {
49         layer.style.display = 'none';
50       }
51     }
52   }
53
54   var _ac = this;
55
56   this.show = function(result)
57   {
58     var obj = result;
59     var layer = null;
60
61     if (document.getElementById('AC_layer'))
62     {
63       layer = document.getElementById('AC_layer');
64       layer.innerHTML = '';
65       layer.style.display = 'block';
66     }
67     else
68     {
69       layer = document.createElement('DIV');
70       layer.id = 'AC_layer';
71       document.body.appendChild(layer);
72     }
73
74     pos = getPosition();
75
76     layer.style.left = pos.x + 'px';
77     layer.style.top = pos.y + 'px';
78     layer.style.width = textbox.clientWidth + 'px';
79     layer.style.position = 'absolute';
80     layer.style.border = _ac.borderStyle;
81     layer.style.background = _ac.background;
82
83     createMenuItem(obj, layer);
84     textbox.onkeyup = function(e)
85     {
86       var evt = fixEvent(e);
87
88       if (evt.keyCode == '38')
89       {
90         highlightItem('prev');
91       }
92
93       if (evt.keyCode == '40')
94       {
95         highlightItem('next');
96       }
97     }
98
99     textbox.onblur = function()
100     {
101       var layer = document.getElementById('AC_layer');
102
103       if (layer)
104       {
105         layer.style.display = 'none';
106       }
107     }
108   }
109
110   var createMenuItem = function(obj, layer)
111   {
112     var lst = document.createElement('UL');
113
114     lst.style.listStyle = 'none';
115     lst.style.margin = '0';
116     lst.style.padding = '1px';
117     lst.style.display = 'block';
118
119     for (i = 0; i < obj.length; i ++ )
120     {
121       if (typeof(obj[i].key) === "undefined" || typeof(obj[i].val) === "undefined")
122       {
123         throw new Error('Error data.');
124         break;
125       }
126       else
127       {
128         var listItem = document.createElement('LI');
129
130         listItem.id = obj[i].key;
131         listItem.innerHTML = obj[i].val;
132         listItem.title = obj[i].val;
133         listItem.style.cursor = "default";
134         listItem.style.pointer = "default";
135         listItem.style.margin = '0px';
136         listItem.style.padding = '0px';
137         listItem.style.display = 'block';
138         listItem.style.width = '100%';
139         listItem.style.height = '16px';
140         listItem.style.overflow = 'hidden';
141
142         listItem.onmouseover = function(e)
143         {
144           for (i = 0; i < this.parentNode.childNodes.length;
145           i ++ )
146           {
147             this.parentNode.childNodes[i].style.backgroundColor = '';
148             this.parentNode.childNodes[i].style.color = '';
149           }
150           this.style.backgroundColor = _ac.highlight;
151           this.style.color = _ac.highlightText;
152
153           assign(this);
154         }
155         ;
156         listItem.onmouseout = function(e)
157         {
158           this.style.backgroundColor = '';
159           this.style.color = '';
160         }
161         ;
162
163         lst.appendChild(listItem);
164       }
165     }
166
167     layer.appendChild(lst);
168   }
169
170   var getPosition = function()
171   {
172     var obj = textbox;
173     var pos =
174     {
175       "x" : 0, "y" : 0
176     }
177
178     pos.x = document.body.offsetLeft;
179     pos.y = document.body.offsetTop + textbox.clientHeight + 3;
180
181     do
182     {
183       pos.x += obj.offsetLeft;
184       pos.y += obj.offsetTop;
185
186       obj = obj.offsetParent;
187     }
188     while (obj.tagName.toUpperCase() != 'BODY')
189
190     return pos;
191   }
192
193   var fixEvent = function(e)
194   {
195     return (typeof e == "undefined") ? window.event : e;
196   }
197
198   var highlightItem = function(direction)
199   {
200     var layer = document.getElementById('AC_layer');
201     var list = null;
202     var item = null;
203
204     if (layer)
205     {
206       list = layer.childNodes[0];
207     }
208
209     if (list)
210     {
211       for (i = 0; i < list.childNodes.length; i ++ )
212       {
213         if (list.childNodes[i].style.backgroundColor == _ac.highlight)
214         {
215           if (direction == 'prev')
216           {
217             item = (i > 0) ? list.childNodes[i - 1] : list.lastChild;
218           }
219           else
220           {
221             item = (i < list.childNodes.length) ? list.childNodes[i + 1] : list.childNodes[0];
222           }
223         }
224
225         list.childNodes[i].style.backgroundColor = '';
226         list.childNodes[i].style.color = '';
227       }
228     }
229
230     if ( ! item)
231     {
232       item = (direction == 'prev') ? list.lastChild : list.childNodes[0];
233     }
234
235     item.style.backgroundColor = _ac.highlight;
236     item.style.color = _ac.highlightText
237
238     assign(item);
239   }
240
241   var assign = function(item)
242   {
243     flag = true;
244     textbox.value = item.innerHTML;
245
246     if (typeof hidden == 'object')
247     {
248       hidden.value = item.id;
249     }
250
251     if (typeof callback == 'function')
252     {
253       callback.call(_ac, item.id, textbox.value);
254     }
255   }
256
257   var debug = function()
258   {
259     // document.getElementById('foo').innerHTML = textbox.value;
260   }
261 }