thox/ajax/autocomplete.js

// $Id: autocomplete.js,v 1.8 2006/03/26 15:07:54 killes Exp $

// Global Killswitch
if (isJsEnabled()) {
  addLoadEvent(autocompleteAutoAttach);
}

/**
 * Attaches the autocomplete behaviour to all required fields
 */
function autocompleteAutoAttach() {
  var acdb = [];
  var inputs = document.getElementsByTagName('input');
  for (i = 0; input = inputs[i]; i++) {
    if (input && hasClass(input, 'autocomplete')) {
      uri = input.value;
      if (!acdb[uri]) {
        acdb[uri] = new ACDB(uri);
      }
      input = $(input.id.substr(0, input.id.length - 13));
      input.setAttribute('autocomplete', 'OFF');
      addSubmitEvent(input.form, autocompleteSubmit);
      new jsAC(input, acdb[uri]);
    }
  }
}

/**
 * Prevents the form from submitting if the suggestions popup is open
 */
function autocompleteSubmit() {
  var popup = document.getElementById('autocomplete');
  if (popup) {
    popup.owner.hidePopup();
    return false;
  }
  return true;
}


/**
 * An AutoComplete object
 */
function jsAC(input, db) {
  var ac = this;
  this.input = input;
  this.db = db;
  this.input.onkeydown = function (event) { return ac.onkeydown(this, event); };
  this.input.onkeyup = function (event) { ac.onkeyup(this, event) };
  this.input.onblur = function () { ac.hidePopup() };
  this.popup = document.createElement('div');
  this.popup.id = 'autocomplete';
  this.popup.owner = this;
};

/**
 * Hides the autocomplete suggestions
 */
jsAC.prototype.hidePopup = function (keycode) {
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = this.selected.autocompleteValue;
  }
  if (this.popup.parentNode && this.popup.parentNode.tagName) {
    removeNode(this.popup);
  }
  this.selected = false;
}


/**
 * Handler for the "keydown" event
 */
jsAC.prototype.onkeydown = function (input, e) {
  if (!e) {
    e = window.event;
  }
  switch (e.keyCode) {
    case 40: // down arrow
      this.selectDown();
      return false;
    case 38: // up arrow
      this.selectUp();
      return false;
    default: // all other keys
      return true;
  }
}

/**
 * Handler for the "keyup" event
 */
jsAC.prototype.onkeyup = function (input, e) {
  if (!e) {
    e = window.event;
  }
  switch (e.keyCode) {
    case 16: // shift
    case 17: // ctrl
    case 18: // alt
    case 20: // caps lock
    case 33: // page up
    case 34: // page down
    case 35: // end
    case 36: // home
    case 37: // left arrow
    case 38: // up arrow
    case 39: // right arrow
    case 40: // down arrow
      return true;

    case 9:  // tab
    case 13: // enter
    case 27: // esc
      this.hidePopup(e.keyCode);
      return true;

    default: // all other keys
      if (input.value.length > 0)
        this.populatePopup();
      else
        this.hidePopup(e.keyCode);
      return true;
  }
}

/**
 * Puts the currently highlighted suggestion into the autocomplete field
 */
jsAC.prototype.select = function (node) {
  this.input.value = node.autocompleteValue;
}

/**
 * Highlights the next suggestion
 */
jsAC.prototype.selectDown = function () {
  if (this.selected && this.selected.nextSibling) {
    this.highlight(this.selected.nextSibling);
  }
  else {
    var lis = this.popup.getElementsByTagName('li');
    if (lis.length > 0) {
      this.highlight(lis[0]);
    }
  }
}

/**
 * Highlights the previous suggestion
 */
jsAC.prototype.selectUp = function () {
  if (this.selected && this.selected.previousSibling) {
    this.highlight(this.selected.previousSibling);
  }
}

/**
 * Highlights a suggestion
 */
jsAC.prototype.highlight = function (node) {
  removeClass(this.selected, 'selected');
  addClass(node, 'selected');
  this.selected = node;
}

/**
 * Unhighlights a suggestion
 */
jsAC.prototype.unhighlight = function (node) {
  removeClass(node, 'selected');
  this.selected = false;
}

/**
 * Positions the suggestions popup and starts a search
 */
jsAC.prototype.populatePopup = function () {
  var ac = this;
  var pos = absolutePosition(this.input);
  this.selected = false;
  this.popup.style.top   = (pos.y + this.input.offsetHeight) +'px';
  this.popup.style.left  = pos.x +'px';
  this.popup.style.width = (this.input.offsetWidth - 4) +'px';
  this.db.owner = this;
  this.db.search(this.input.value);
}

/**
 * Fills the suggestion popup with any matches received
 */
jsAC.prototype.found = function (matches) {
  while (this.popup.hasChildNodes()) {
    this.popup.removeChild(this.popup.childNodes[0]);
  }
  if (!this.popup.parentNode || !this.popup.parentNode.tagName) {
    document.getElementsByTagName('body')[0].appendChild(this.popup);
  }
  var ul = document.createElement('ul');
  var ac = this;
  if (matches.length > 0) {
    for (var i = 0; i < matches.length; i++) {
      li = document.createElement('li');
      div = document.createElement('div');
      div.innerHTML = matches[i][1];
      li.appendChild(div);
      li.autocompleteValue = matches[i][0];
      li.onmousedown = function() { ac.select(this); };
      li.onmouseover = function() { ac.highlight(this); };
      li.onmouseout  = function() { ac.unhighlight(this); };
      ul.appendChild(li);
    }
    this.popup.appendChild(ul);
  }
  else {
    this.hidePopup();
  }
  removeClass(this.input, 'throbbing');
}

/**
 * An AutoComplete DataBase object
 */
function ACDB(uri) {
  this.uri = uri;
  this.delay = 300;
  this.cache = {};
}

/**
 * Performs a cached and delayed search
 */
ACDB.prototype.search = function(searchString) {
  this.searchString = searchString;
  if (this.cache[searchString]) {
    return this.owner.found(this.cache[searchString]);
  }
  if (this.timer) {
    clearTimeout(this.timer);
  }
  var db = this;
  this.timer = setTimeout(function() {
    addClass(db.owner.input, 'throbbing');
    HTTPGet(db.uri +'/'+ encodeURIComponent(searchString), db.receive, db);
  }, this.delay);
}

/**
 * HTTP callback function. Passes suggestions to the autocomplete object
 */
ACDB.prototype.receive = function(string, xmlhttp, acdb) {
  // Note: Safari returns 'undefined' status if the request returns no data.
  if (xmlhttp.status != 200 && typeof xmlhttp.status != 'undefined') {
    removeClass(acdb.owner.input, 'throbbing');
    return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri);
  }
  // Split into array of key->value pairs
  var matches = string.length > 0 ? string.split('||') : [];
  for (var i = 0; i < matches.length; i++) {
    matches[i] = matches[i].length > 0 ? matches[i].split('|') : [];
    // Decode textfield pipes back to plain-text
    matches[i][0] = eregReplace('&#124;', '|', matches[i][0]);
  }
  acdb.cache[acdb.searchString] = matches;
  acdb.owner.found(matches);
}
1	// $Id: autocomplete.js,v 1.8 2006/03/26 15:07:54 killes Exp $
2
3	// Global Killswitch
4	if (isJsEnabled()) {
5	addLoadEvent(autocompleteAutoAttach);
6	}
7
8	/**
9	* Attaches the autocomplete behaviour to all required fields
10	*/
11	function autocompleteAutoAttach() {
12	var acdb = [];
13	var inputs = document.getElementsByTagName('input');
14	for (i = 0; input = inputs[i]; i++) {
15	if (input && hasClass(input, 'autocomplete')) {
16	uri = input.value;
17	if (!acdb[uri]) {
18	acdb[uri] = new ACDB(uri);
19	}
20	input = $(input.id.substr(0, input.id.length - 13));
21	input.setAttribute('autocomplete', 'OFF');
22	addSubmitEvent(input.form, autocompleteSubmit);
23	new jsAC(input, acdb[uri]);
24	}
25	}
26	}
27
28	/**
29	* Prevents the form from submitting if the suggestions popup is open
30	*/
31	function autocompleteSubmit() {
32	var popup = document.getElementById('autocomplete');
33	if (popup) {
34	popup.owner.hidePopup();
35	return false;
36	}
37	return true;
38	}
39
40
41	/**
42	* An AutoComplete object
43	*/
44	function jsAC(input, db) {
45	var ac = this;
46	this.input = input;
47	this.db = db;
48	this.input.onkeydown = function (event) { return ac.onkeydown(this, event); };
49	this.input.onkeyup = function (event) { ac.onkeyup(this, event) };
50	this.input.onblur = function () { ac.hidePopup() };
51	this.popup = document.createElement('div');
52	this.popup.id = 'autocomplete';
53	this.popup.owner = this;
54	};
55
56	/**
57	* Hides the autocomplete suggestions
58	*/
59	jsAC.prototype.hidePopup = function (keycode) {
60	if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) \|\| !keycode)) {
61	this.input.value = this.selected.autocompleteValue;
62	}
63	if (this.popup.parentNode && this.popup.parentNode.tagName) {
64	removeNode(this.popup);
65	}
66	this.selected = false;
67	}
68
69
70	/**
71	* Handler for the "keydown" event
72	*/
73	jsAC.prototype.onkeydown = function (input, e) {
74	if (!e) {
75	e = window.event;
76	}
77	switch (e.keyCode) {
78	case 40: // down arrow
79	this.selectDown();
80	return false;
81	case 38: // up arrow
82	this.selectUp();
83	return false;
84	default: // all other keys
85	return true;
86	}
87	}
88
89	/**
90	* Handler for the "keyup" event
91	*/
92	jsAC.prototype.onkeyup = function (input, e) {
93	if (!e) {
94	e = window.event;
95	}
96	switch (e.keyCode) {
97	case 16: // shift
98	case 17: // ctrl
99	case 18: // alt
100	case 20: // caps lock
101	case 33: // page up
102	case 34: // page down
103	case 35: // end
104	case 36: // home
105	case 37: // left arrow
106	case 38: // up arrow
107	case 39: // right arrow
108	case 40: // down arrow
109	return true;
110
111	case 9: // tab
112	case 13: // enter
113	case 27: // esc
114	this.hidePopup(e.keyCode);
115	return true;
116
117	default: // all other keys
118	if (input.value.length > 0)
119	this.populatePopup();
120	else
121	this.hidePopup(e.keyCode);
122	return true;
123	}
124	}
125
126	/**
127	* Puts the currently highlighted suggestion into the autocomplete field
128	*/
129	jsAC.prototype.select = function (node) {
130	this.input.value = node.autocompleteValue;
131	}
132
133	/**
134	* Highlights the next suggestion
135	*/
136	jsAC.prototype.selectDown = function () {
137	if (this.selected && this.selected.nextSibling) {
138	this.highlight(this.selected.nextSibling);
139	}
140	else {
141	var lis = this.popup.getElementsByTagName('li');
142	if (lis.length > 0) {
143	this.highlight(lis[0]);
144	}
145	}
146	}
147
148	/**
149	* Highlights the previous suggestion
150	*/
151	jsAC.prototype.selectUp = function () {
152	if (this.selected && this.selected.previousSibling) {
153	this.highlight(this.selected.previousSibling);
154	}
155	}
156
157	/**
158	* Highlights a suggestion
159	*/
160	jsAC.prototype.highlight = function (node) {
161	removeClass(this.selected, 'selected');
162	addClass(node, 'selected');
163	this.selected = node;
164	}
165
166	/**
167	* Unhighlights a suggestion
168	*/
169	jsAC.prototype.unhighlight = function (node) {
170	removeClass(node, 'selected');
171	this.selected = false;
172	}
173
174	/**
175	* Positions the suggestions popup and starts a search
176	*/
177	jsAC.prototype.populatePopup = function () {
178	var ac = this;
179	var pos = absolutePosition(this.input);
180	this.selected = false;
181	this.popup.style.top = (pos.y + this.input.offsetHeight) +'px';
182	this.popup.style.left = pos.x +'px';
183	this.popup.style.width = (this.input.offsetWidth - 4) +'px';
184	this.db.owner = this;
185	this.db.search(this.input.value);
186	}
187
188	/**
189	* Fills the suggestion popup with any matches received
190	*/
191	jsAC.prototype.found = function (matches) {
192	while (this.popup.hasChildNodes()) {
193	this.popup.removeChild(this.popup.childNodes[0]);
194	}
195	if (!this.popup.parentNode \|\| !this.popup.parentNode.tagName) {
196	document.getElementsByTagName('body')[0].appendChild(this.popup);
197	}
198	var ul = document.createElement('ul');
199	var ac = this;
200	if (matches.length > 0) {
201	for (var i = 0; i < matches.length; i++) {
202	li = document.createElement('li');
203	div = document.createElement('div');
204	div.innerHTML = matches[i][1];
205	li.appendChild(div);
206	li.autocompleteValue = matches[i][0];
207	li.onmousedown = function() { ac.select(this); };
208	li.onmouseover = function() { ac.highlight(this); };
209	li.onmouseout = function() { ac.unhighlight(this); };
210	ul.appendChild(li);
211	}
212	this.popup.appendChild(ul);
213	}
214	else {
215	this.hidePopup();
216	}
217	removeClass(this.input, 'throbbing');
218	}
219
220	/**
221	* An AutoComplete DataBase object
222	*/
223	function ACDB(uri) {
224	this.uri = uri;
225	this.delay = 300;
226	this.cache = {};
227	}
228
229	/**
230	* Performs a cached and delayed search
231	*/
232	ACDB.prototype.search = function(searchString) {
233	this.searchString = searchString;
234	if (this.cache[searchString]) {
235	return this.owner.found(this.cache[searchString]);
236	}
237	if (this.timer) {
238	clearTimeout(this.timer);
239	}
240	var db = this;
241	this.timer = setTimeout(function() {
242	addClass(db.owner.input, 'throbbing');
243	HTTPGet(db.uri +'/'+ encodeURIComponent(searchString), db.receive, db);
244	}, this.delay);
245	}
246
247	/**
248	* HTTP callback function. Passes suggestions to the autocomplete object
249	*/
250	ACDB.prototype.receive = function(string, xmlhttp, acdb) {
251	// Note: Safari returns 'undefined' status if the request returns no data.
252	if (xmlhttp.status != 200 && typeof xmlhttp.status != 'undefined') {
253	removeClass(acdb.owner.input, 'throbbing');
254	return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri);
255	}
256	// Split into array of key->value pairs
257	var matches = string.length > 0 ? string.split('\|\|') : [];
258	for (var i = 0; i < matches.length; i++) {
259	matches[i] = matches[i].length > 0 ? matches[i].split('\|') : [];
260	// Decode textfield pipes back to plain-text
261	matches[i][0] = eregReplace('\|', '\|', matches[i][0]);
262	}
263	acdb.cache[acdb.searchString] = matches;
264	acdb.owner.found(matches);
265	}