misc/autocomplete.js

   1 // $Id: autocomplete.js 144 2007-03-28 07:52:20Z thierry $
   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(); ac.db.cancel(); };
  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
 201   for (key in matches) {
 202     var li = document.createElement('li');
 203     var div = document.createElement('div');
 204     div.innerHTML = matches[key];
 205     li.appendChild(div);
 206     li.autocompleteValue = key;
 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
 213   if (ul.childNodes.length > 0) {
 214     this.popup.appendChild(ul);
 215   }
 216   else {
 217     this.hidePopup();
 218   }
 219   removeClass(this.input, 'throbbing');
 220 }
 221
 222 /**
 223  * An AutoComplete DataBase object
 224  */
 225 function ACDB(uri) {
 226   this.uri = uri;
 227   this.delay = 300;
 228   this.cache = {};
 229 }
 230
 231 /**
 232  * Performs a cached and delayed search
 233  */
 234 ACDB.prototype.search = function(searchString) {
 235   this.searchString = searchString;
 236   if (this.cache[searchString]) {
 237     return this.owner.found(this.cache[searchString]);
 238   }
 239   if (this.timer) {
 240     clearTimeout(this.timer);
 241   }
 242   var db = this;
 243   this.timer = setTimeout(function() {
 244     addClass(db.owner.input, 'throbbing');
 245     db.transport = HTTPGet(db.uri +'/'+ encodeURIComponent(searchString), db.receive, db);
 246   }, this.delay);
 247 }
 248
 249 /**
 250  * HTTP callback function. Passes suggestions to the autocomplete object
 251  */
 252 ACDB.prototype.receive = function(string, xmlhttp, acdb) {
 253   // Note: Safari returns 'undefined' status if the request returns no data.
 254   if (xmlhttp.status != 200 && typeof xmlhttp.status != 'undefined') {
 255     removeClass(acdb.owner.input, 'throbbing');
 256     return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri);
 257   }
 258   // Parse back result
 259   var matches = parseJson(string);
 260   if (typeof matches['status'] == 'undefined' || matches['status'] != 0) {
 261     acdb.cache[acdb.searchString] = matches;
 262     acdb.owner.found(matches);
 263   }
 264 }
 265
 266 /**
 267  * Cancels the current autocomplete request
 268  */
 269 ACDB.prototype.cancel = function() {
 270   if (this.owner) removeClass(this.owner.input, 'throbbing');
 271   if (this.timer) clearTimeout(this.timer);
 272   if (this.transport) {
 273     this.transport.onreadystatechange = function() {};
 274     this.transport.abort();
 275   }
 276 }