Form Auto-complete function:

1. Bootstrap's Bootstrap-typeahead.js
2. The Autocomplete.js of jquery
3. JS for automatic completion

<! DOCTYPE html>

<meta charset= "Utf-8"/>

<style>

Body {

margin-left:0px;

margin-top:0px;

margin-right:0px;

margin-bottom:0px;

}

. Auto_hidden {

width:204px;

border-top:1px solid #333;

border-bottom:1px solid #333;

border-left:1px solid #333;

border-right:1px solid #333;

Position:absolute;

Display:none;

}

. auto_show {

width:204px;

border-top:1px solid #333;

border-bottom:1px solid #333;

border-left:1px solid #333;

border-right:1px solid #333;

Position:absolute;

z-index:9999; /* Set the stacking order of objects */

Display:block;

}

. auto_onmouseover {

Color: #ffffff;

Background-color:highlight;

width:100%;

}

. auto_onmouseout {

Color: #000000;

width:100%;

Background-color: #ffffff;

}

</style>

<script language= "JavaScript" >

var $ = function (ID) {

Return "string" = = typeof ID? document.getElementById (ID): ID;

}

var Bind = function (object, fun) {

return function () {

Return Fun.apply (object, arguments);

}

}

function AutoComplete (obj, autoobj, arr) {

This.obj = $ (obj); Input box

This.autoobj = $ (autoobj); root node of//div

This.value_arr = arr; Do not include duplicate values

This.index =-1; Index of the currently selected Div

This.search_value = ""; Save the current search character

}

Autocomplete.prototype = {

The location of the initialization div

Init:function () {

This.autoObj.style.left = this.obj.offsetLeft + "px";

This.autoObj.style.top = This.obj.offsetTop + this.obj.offsetHeight

+ "px";

This.autoObj.style.width = this.obj.offsetwidth-2 + "px";//minus the length of the border 2px

},

Remove all div required for AutoComplete

Deletediv:function () {

while (This.autoObj.hasChildNodes ()) {

This.autoObj.removeChild (This.autoObj.firstChild);

}

This.autoObj.className = "Auto_hidden";

},

Setting the value

Setvalue:function (_this) {

return function () {

_this.obj.value = This.seq;

_this.autoobj.classname = "Auto_hidden";

}

},

When the mouse moves to the Div, the Div highlights

Autoonmouseover:function (_this, _div_index) {

return function () {

_this.index = _div_index;

var length = _this.autoobj.children.length;

for (var j = 0; J < length; J + +) {

if (j! = _this.index) {

_this.autoobj.childnodes[j].classname = ' auto_onmouseout ';

} else {

_this.autoobj.childnodes[j].classname = ' auto_onmouseover ';

}

}

}

},

Change classname

Changeclassname:function (length) {

for (var i = 0; i < length; i++) {

if (i! = This.index) {

This.autoobj.childnodes[i].classname = ' auto_onmouseout ';

} else {

This.autoobj.childnodes[i].classname = ' auto_onmouseover ';

This.obj.value = This.autoobj.childnodes[i].seq;

}

}

},

Response keyboard

Presskey:function (event) {

var length = This.autoObj.children.length;

Cursor Key "↓"

if (Event.keycode = = 40) {

++this.index;

if (This.index > Length) {

This.index = 0;

} else if (This.index = = length) {

This.obj.value = This.search_value;

}

This.changeclassname (length);

}

cursor Keys "↑"

else if (Event.keycode = = 38) {

this.index--;

if (This.index <-1) {

This.index = length-1;

} else if (This.index = =-1) {

This.obj.value = This.search_value;

}

This.changeclassname (length);

}

Enter

else if (Event.keycode = = 13) {

This.autoObj.className = "Auto_hidden";

This.index =-1;

} else {

This.index =-1;

}

},

Program entry

Start:function (event) {

if (event.keycode! = && Event.keycode! = 38

&& Event.keycode! = 40) {

This.init ();

This.deletediv ();

This.search_value = This.obj.value;

var valuearr = This.value_arr;

Valuearr.sort ();

if (This.obj.value.replace (/(^\s*) | ( \s*$)/g, ') = = "") {

Return

}//value is empty, exit

try {

var reg = new RegExp ("(" + This.obj.value + ")", "I");

} catch (e) {

Return

}

var div_index = 0;//Record the index of the div created

for (var i = 0; i < valuearr.length; i++) {

if (Reg.test (Valuearr[i])) {

var div = document.createelement ("div");

Div.classname = "Auto_onmouseout";

Div.seq = Valuearr[i];

Div.onclick = This.setvalue (this);

Div.onmouseover = This.autoonmouseover (this, div_index);

div.innerhtml = Valuearr[i].replace (Reg,

"<strong>$1</strong>");//Search to the character bold display

This.autoObj.appendChild (DIV);

This.autoObj.className = "Auto_show";

div_index++;

}

}

}

This.presskey (event);

Window.onresize = Bind (this, function () {

This.init ();

});

}

}

-

</SCRIPT>

<body>

<H1 align= "center" > AutoComplete functions (Autocomplete function)

<div align= "center" >

<input type= "Text"

Style= "width:300px; height:20px; font-size:14pt; "Id=" O "

onkeyup= "Autocomplete.start (event)" >

</div>

<div class= "Auto_hidden" id= "Auto" >

<!--auto-complete div-->

</div>

<script>

var autoComplete = new AutoComplete (' O ', ' auto ', [' B0 ', ' B12 ', ' B22 ',

' B3 ', ' B4 ', ' B5 ', ' B6 ', ' B7 ', ' B8 ', ' B2 ', ' Abd ', ' ab ', ' ACD ',

' ACCD ', ' B1 ', ' CD ', ' CCD ', ' CBCV ', ' cxf ']);

</SCRIPT>

</body>

Form Auto-complete function: