<HTML>
<HEAD>
<title>还不太完善的完善自动完成JS，哈</title>
<style>
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
font-family:verdana;
line-height:100%;
font-size:9pt;
float:none;
}
/*firefox得设置一下CSS位置**/
#divc {left:385px;top:604px;overflow;auto;height:250px;width:180px;visibility:hidden;position:absolute;zIndex:9999;}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
width:100%;
cursor:default;
}
.mouseout {
color:#000000;
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 = "250";
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,callback) { with (this)
{
if(_r)
{
_r.value = msg;
_o.style.visibility = "hidden";
// 回调函数，当鼠标选择时候触发，参数：选择项值
if(callback) {
callback(_r.value);
}
}
else
{
alert("javascript autocomplete ERROR :nn can not get return object.");
return;
}
}};
// object method;
jsAuto.prototype.item=function(msg)
{
if( msg.indexOf(",")>0 )
{
var arrMsg=msg.split(",");
for(var i=0; i<arrMsg.length; i++)
{
arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
}
}
else
{
this._msg.push(msg);
}
this._msg.sort();
};
jsAuto.prototype.append=function(msg,isAll,callback) { with (this)
{
_i ? "" : _i = eval(_i);
_x.push(msg);
var div = document.createElement("DIV");
//bind event to object.
div.onmouseover = function(){_i.domouseover(this)};
div.onmouseout = function(){_i.domouseout(this)};
div.onclick = function(){_i.doclick(msg,callback)};
var re = new RegExp("(" + _v + ")","i");
div.style.lineHeight="140%";
div.className = "mouseout";
if(isAll) {
div.innerHTML = msg;
}else {
if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
}
div.style.fontFamily = "verdana";
_o.appendChild(div);
}};
jsAuto.prototype.display=function(positionLeft, positionTop) { with(this)
{
if(_f&&_v!="")
{
if(positionLeft) {
left = positionLeft;
}else {
left = _r.offsetLeft;
}
if(positionTop) {
top = positionTop;
}else {
top = _r.offsetTop;
}
_o.style.left = left;
_o.style.width = _r.offsetWidth;
_o.style.top = top + _r.offsetHeight;
_o.style.visibility = "visible";
}
else
{
_o.style.visibility="hidden";
}
}};
jsAuto.prototype.handleEvent=function(fValue,fID,event,isAll,positionLeft,positionTop,callback) { with (this)
{
var re;
_e = event;
var e = _e.keyCode ? _e.keyCode : _e.which;
_x = [];
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
var regexValue = "";
if(isAll) { // 显示所有
regexValue = ".";
}else {
regexValue = fValue;
}
re = new RegExp("^" + regexValue + "", "i");
_o.innerHTML="";
for(var i=0; i<_msg.length; i++)
{
if(re.test(_msg[i]))
{
_i.append(_msg[i],isAll,callback);
_f = true;
}
}
_i ? _i.display(positionLeft,positionTop) : alert("can not get instance");
if(_f)
{
if((e==38 || e==40 || e==13))
{
_i.directionKey();
}
else
{
_c=0;
_o.childNodes[_c].className = "mouseover";
_s=true;
}
}
}};
window.onerror=new Function("return true;");
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="divc">
<!--this is the autocomplete container.-->
</div>
<h1>Autocomplete Function</h1>
<div align="center">
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event,false)" id="auto">
</div>
<!--onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event,false,385,593,complateLinkSpUrl)"
《索值，input ID，事件，是否显示全部[,如果样式存在冲突，可绝对定位（left,top),回调函数]》[]为可选
-->
<div id="divf">
匹配词容器
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");
//-->
</SCRIPT>
<center>请随便输入一个字母看看 -_-</center>
</BODY>
</HTML>
夸浏览器支持不是很好，待改善。。
分享到：
相关推荐
EDITPLUS 自动完成JavaScript插件
自动完成JS 解决select 问题，等待解决 IFRAME颜色问题。
看了不后悔，最后想办法弄个颜色。
一、 封装的JS文件 //******************************************************** //创建日期: 2009-03-10 //作 者: oloen //內容说明: 自动完成JS类 //用法： // var auto = new autoComplete(客户端ID);...
面向对象的纯js仿百度自动完成，可以在一个页面内通过创建对象使用多个
简单的自动完成的纯原始Javascript库。 v8.3 autoComplete.js是一个简单的纯原始Javascript库，该库逐步为速度，多功能性以及与广泛的项目和系统无缝集成而设计，专为用户和开发人员而设计。 产品特点 纯香草...
EDITPLUS 自动完成插件 （JS 含jQuery API）
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb。 标签：AutoJS
使用JavaScript 完成表单的自动计算
用js实现输入提示（自动完成） 附加代码 请放心下载
javascript 仿照google自动完成效果，关键词完全可以动态
jquery+js +PHP +mysql 实现自动完成功能 ，附资料，源码（资料为英文版）
JS自动完成，支持中文拼音，不支持多音字。
<script src="JS/jquery-1.4.1-vsdoc.js" type="text/javascript"> <script src="JS/jquery-1.4.1.js" type="text/javascript"> <script src="JS/jquery-ui.min.js" type="text/javascript"> <script src="JS/...
GraphQL Zeus为Javascript或Typescript创建自动完成客户端库，为强类型查询提供自动完成功能
一款小巧的自动提示数据完成小插件，类似有很多，这款是基于jqUi的，非常好引用，兼容性比较好
js 实现 输入框自动完成功能! 值得下载看看!资源免费,大家分享!!
最近又花了点时间写了个在一般项目中比较常用的插件，就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据，支持能过配置的自定义处观位置与大小的调整；自定义事件触发；自定义请求...