JS实现仿百度输入框自动匹配功能的范例代码

发布时间：2023-10-16 15:36:12 所属栏目：教程来源：

导读：现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到AJAX那东东。

代码如下:

现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到AJAX那东东。

代码如下:

<HTML>

<HEAD>

<title>带输入匹配的文本框</title>

<style>

body,div {

font-family:verdana;

line-height:100%;

font-size:10pt;

}

input {

width:320px;

}

h1 {

text-align:center;

font-size:2.2em;

}

#divc {

border:1px solid #555;

}

.des {

width:500px;

background-color:lightyellow;

border:1px solid #555;

padding:25px;

margin-top:25px;

}

.mouseover {

color:#ffffff;

background-color:highlight;

width:100%;

cursor:default;

}

.mouseout {

color:#000;

width:100%;

background-color:#ffffff;

cursor:default;

}

</style>

<SCRIPT LANGUAGE="JavaScript">

<!--

function jsAuto(instanceName,objID)

{

this._msg = [];

this._x = null;

this._o = document.getElementById( objID );

if (!this._o) return;

this._f = null;

this._i = instanceName;

this._r = null;

this._c = 0;

this._s = false;

this._v = null;

this._o.style.visibility = "hidden";

this._o.style.position = "absolute";

this._o.style.zIndex = "9999";

this._o.style.overflow = "auto";

this._o.style.height = "50";

return this;

};

jsAuto.prototype.directionKey=function() { with (this)

{

var e = _e.keyCode ? _e.keyCode : _e.which;

var l = _o.childNodes.length;

(_c>l-1 || _c<0) ? _s=false : "";

if( e==40 && _s )

{

_o.childNodes[_c].className="mouseout";

(_c >= l-1) ? _c=0 : _c ++;

_o.childNodes[_c].className="mouseover";

}

if( e==38 && _s )

{

_o.childNodes[_c].className="mouseout";

_c--<=0 ? _c = _o.childNodes.length-1 : "";

_o.childNodes[_c].className="mouseover";

}

if( e==13 )

{

if(_o.childNodes[_c] && _o.style.visibility=="visible")

{

_r.value = _x[_c];

_o.style.visibility = "hidden";

}

}

if( !_s )

{

_c = 0;

_o.childNodes[_c].className="mouseover";

_s = true;

}

}};

// mouseEvent.

jsAuto.prototype.domouseover=function(obj) { with (this)

{

_o.childNodes[_c].className = "mouseout";

_c = 0;

obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";

}};

jsAuto.prototype.domouseout=function(obj)

{

obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";

};

jsAuto.prototype.doclick=function(msg) { with (this)

{

if(_r)

{

_r.value = msg;

_o.style.visibility = "hidden";

}

else

{

alert("javascript autocomplete ERROR :/n/n can not get return object.");

return;

}

}};

// object method;

jsAuto.prototype.item=function(msg)

{

if( msg.indexOf(",")>0 )

{

var arrMsg=msg.split(",");

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!