English : Português

Description : Code : Example : Help : Rank

Auto-complete for inputs using a combo.
Created: 2005.11.21 - Modified 2013.09.17

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/dhtml/auto-complete [rev. #4]

AutoComplete = function(form){
    var o = this;
    o.form = document.forms[form], o.fields = {};
    o.hide = function(f){
        var s = f.box.style;
        s.display != "none" && f.box && (s.display = "none", o.onHide && o.onHide(f));
    }
    o.show = function(f){
        var b = f.box, s = b.style;
        s.display != "block" && b && b.options.length && (b.selectedIndex = 0,
        b.style.display = "block", o.onShow && o.onShow(f));
    }
    o.filter = function(h){
        var a, b = h.box, s = b.style, v, l = (v = (o.ignoreAccents ? o.rem(h.value) : h.value).toLowerCase()).length;
        for(var p = 0, t = h.list, i = t.length; i--;)
            (a = (o.ignoreAccents ? o.rem(t[i]) : t[i]).toLowerCase().indexOf(v), o.matchExact ? !a : a > -1) &&
            t[i].length != l && (b.options[p++] = new Option(t[i], t[i]));
        return b.size = (b.options.length = p) < o.size ? p : o.size, p;
    }
    o.rem = function(s){
        var a = {a: "??????", e: "????", i: "????", o: "???", u: "????", c: "?", n: "?"};
        for(var i in a) s = s.replace(new RegExp("[" + a[i] + "]", "gi"), i);
        return s;
    }
}
AutoComplete.prototype.size = 5;
AutoComplete.prototype.matchExact = true;
AutoComplete.prototype.ignoreAccents = true;
AutoComplete.prototype.addControls = function(field){
    var o = this.form[field], b = o.box, h = this;
    addEvent(o, "keydown", function(e){
        e.key == 40 && b.style.display == "block" && b.focus();
    });
    addEvent(o, "keypress", function(e){
        e.key == 13 && b.style.display == "block" && (h.hide(o), b.ondblclick(), e.preventDefault());
    });
    addEvent(o, "keyup", function(e){
        if(!o.value) return;
        if(e.key == 13 && b.style.display == "block") return b.ondblclick();
        (e = h.filter(o)) && h.show(o), !e && (b.fo && !b.blur() || (h.hide(o), o.focus()));
    });
    addEvent(o, "blur", function(){
        setTimeout(function(){return !b.fo && h.hide(o);}, 10);
    });
    b.onblur = function(){h.hide(o), b.f = b.fo = false;}
    b.onfocus = function(){b.fo = true;}
    b.onclick = function(){this.options.length == 1 && this.ondblclick()}
    b.ondblclick = function(){
        h.onSelect && h.onSelect.call(this, b.selectedIndex);
        o.value = b.options[b.selectedIndex].value;
        b.fo && b.blur(), o.focus();
    }
    addEvent(b, "keypress", function(e){e.key == 8 && o.focus()});
    addEvent(b, "keyup", function(e){
        if(e.key == 13) b.ondblclick();
        else if(e.key == 38)
            !b.selectedIndex && b.f && (b.blur(), o.focus()), b.f = true;
        else b.f = false;
    });
}
AutoComplete.prototype.addField = function(field, list, cssClass){
    if(this.fields[field]) return;
    var f, v, a, x = ((f = this.form[(this.fields[field] = 1, field)]).list = list, v = f).offsetLeft, y = f.offsetTop, st;
    while(v = v.offsetParent) (y += v.offsetTop, x += v.offsetLeft);
    f.box = document.createElement("select"), cssClass && (f.box.className = cssClass);
    for(var s in st = f.box.style, a = {display: "none", position: "absolute", width: f.offsetWidth + "px",
        top: y + f.offsetHeight + "px", left: x + "px"}) st[s] = a[s];
    return this.addControls((document.body.appendChild(f.box), field));
}

<style type="text/css">
.box{
    font: 10px verdana;
    background: #fef2c5;
    border: 1px solid #999;
}
</style>

<form action="" id="formulario">
    <fieldset>
        <legend>Preenchimento din?mico</legend>
        <label for="nome">Nome</label>
        <input autocomplete="0" type="text" name="nome" id="nome" />
        <input type="button" name="nome_complete" value="AutoComplete.Show()" />
        <br />
        <label for="tel">Telefone</label>
        <input autocomplete="0" type="text" name="tel" id="tel" />
    </fieldset>
</form>
<br style="clear:both;" />
<span id="label"></span>

<script type="text/javascript">
//<![CDATA[

var nomes = ["Armindo", "Arminda", "Armando", "Arlindo", "Benedito", "Diana", "Ti?o", "Vanessa"];
var telefones = ["4221 0339", "4548 0813", "4548 1225", "4665 0056", "4665 0636", "4665 0037", "2236 0106", "2236 0533"];

var code = new AutoComplete("formulario");
//code.ignoreAccents = false;
//code.matchExact = false;
code.addField("nome", nomes, "box");
code.addField("tel", telefones);
code.onSelect = function(i){
    //alert(this.options[i].text);
}
code.onShow = function(f){
    document.getElementById("label").innerHTML += "SHOW = " + f.name + "<br />";
}
code.onHide = function(f){
    document.getElementById("label").innerHTML += "HIDE = " + f.name + "<br />";
}
document.forms.formulario.nome_complete.onclick = function(){
    code.filter(this.form.nome), code.show(this.form.nome);
}
document.getElementById("label").innerHTML = "<b>Nomes:</b><br />" + nomes.join("<br />") + "<br /><br />" + "<b>Telefones:</b><br />" + telefones.join("<br />");

//]]>
</script>

Constructor

AutoComplete(formName: String)

Generates an instance of AutoComplete.

formName

name or id of the form where the fields are

Properties

AutoComplete.size: Integer

Indicates the maximum amount of items that will be shown in the combo (size property of the select). The default value is 5.

AutoComplete.matchExact: Boolean

If true, only perfect matches will appear in the list, otherwise the class will search for any occurrence of the searched word. The default value is true.

AutoComplete.ignoreAccents: Boolean

Indicates if the class will ignore the accents while searching. The default value is true.

Methods

AutoComplete.addField(fieldName: String, list: Array, [className: String]): void

Attaches the autocomplete to a field.

fieldName

name of the input that will receive the auto-complete

list

list where the class will search for matches

className

CSS class name that will be used by the auto-complete

AutoComplete.show(field: HTMLInputElement): void

Shows the list assigned to the field.

field

field reference

AutoComplete.hide(field: HTMLInputElement): void

Hides the list assigned to the field.

field

field reference

AutoComplete.show(field: HTMLInputElement): void

Filters the list assigned to the field.

field

field reference

Events

AutoComplete.onSelect: function(index: Integer): void

This event is called when an item is selected with double-click or enter.
The word "this" inside the callback refers to the auto-complete <select> object.

index

index of the selected option

AutoComplete.onShow: function(field: HTMLField): void

This event is called when the list is shown.

field

input element that is attached to the autocomplete

AutoComplete.onHide: function(field: HTMLField): void

This event is called when the list is hidden.

field

input element that is attached to the autocomplete

0 1 2 3 4 5