Escrevi um código utilizando algumas features do mootools para dar sugestões de preenchimento nos campos do tipo textbox.

var Sugestions = {

init: function(id, options)
{
var sel = document.createElement(’select’);

var coo = $(id).getCoordinates();

sel.id = id + ‘_sel’;
sel.size = 6;
sel.style.position = ‘absolute’;
sel.style.zIndex = 1000;
sel.style.top = (coo.top + coo.height - 1) + ‘px’;
sel.style.left = coo.left + ‘px’;
sel.style.display = ‘none’;
sel.style.width = coo.width + ‘px’;

document.body.appendChild(sel);

for ( var i = 0; i < options.length; i++ )
{
sel.options[i] = new Option(options[i]);
}

$(id).onfocus = function() { $(id + ‘_sel’).style.display = ‘block’; }
$(id).onblur = function() { $(id + ‘_sel’).style.display = ‘none’; }

$(id + ‘_sel’).onfocus = function() { this.style.display = ‘block’; }
$(id + ‘_sel’).onblur = function() { this.style.display = ‘none’; }

$(id + ‘_sel’).onchange = function()
{
this.style.display = ‘none’;
$(id).value = this.options[this.selectedIndex].value;
}
}
}

E para utilizar o plugin

Sugestions.init(’forma_pagamento’,[’Depósito bancário’, ‘Em mãos’, ‘Boleto bancário’])

Posted in web, javascript, dom, mootools | 2 Comments »