<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 自动完成JS插件"是专门为EDITPLUS设计的一个增强工具，用于提升JavaScript开发时的代码编写效率。 该插件的核心特性是自动完成功能，它可以在用户输入代码时提供智能提示，根据上下文显示可能的函数、...
标题中的“自动完成JS类(纯JS, Ajax模式)”指的是在JavaScript中实现的自动完成功能，这是一种常见的用户界面特性，通常用于输入框，当用户在输入时，系统会根据已输入的内容提供匹配的建议列表。这个类是使用纯...
【自动完成 JS】技术是前端开发中的重要组成部分，主要用于提高用户输入效率和用户体验。它广泛应用于搜索框、表单输入、代码编辑器等场景，通过预测和建议用户可能要输入的内容，大大减少了用户手动键入的步骤。在...
标题“自动完成JS”指的是在JavaScript中实现自动补全或自动建议的功能，这通常用于提升用户在输入框中输入内容时的效率和体验。在Web开发中，这种功能广泛应用于搜索框、表单填写等场景，它能预测并提供用户可能想...
面向对象的纯js仿百度自动完成，可以在一个页面内通过创建对象使用多个
总的来说，EDITPLUS的自动完成插件（JS含jQuery API）是一个高效且实用的工具，它能够帮助开发者快速编写JavaScript和jQuery代码，提高开发速度和代码质量。无论是初学者还是经验丰富的专业人士，都能从中受益。通过...
简单的自动完成的纯原始Javascript库。 v8.3 autoComplete.js是一个简单的纯原始Javascript库，该库逐步为速度，多功能性以及与广泛的项目和系统无缝集成而设计，专为用户和开发人员而设计。 产品特点 纯香草...
在JavaScript编程中，"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能，使得能够自动为带有特定前缀（例如"0X"）的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...
标题 "完美的自动完成效果(JS)" 描述了一个使用JavaScript实现的高效且功能丰富的自动完成功能。这个功能在用户输入时可以提供智能提示，显示多个字段的数据，并且支持使用多个控件来处理不同的选择项，提高了用户...
`44444.html`可能是示例页面，`jquery-1.3.2.js`是jQuery库的旧版本，而`bb.js`可能是包含自动完成逻辑的JavaScript脚本。 综上所述，利用jQuery实现自动完成功能，主要涉及到Ajax通信、CSS布局以及jQuery的事件...
标题 "基于JS自动完成容易使用" 暗示了我们讨论的主题是JavaScript实现的自动完成功能，这种功能常见于各种网页输入框，为用户提供方便的建议或预测性输入。在网页开发中，自动完成功能可以显著提高用户体验，尤其在...
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb。 标签：AutoJS
JavaScript自动完成，通常被称为“Autocomplete”或“Typeahead”，是一种常见的前端开发功能，用于提高用户在输入框中输入信息时的效率。基于jQuery UI的Autocomplete插件是实现这一功能的一个优秀选择，尤其因其轻...
开发者可以下载这个压缩包，解压后查看和学习其中的JavaScript代码，了解如何实现这样的自动联想和自动完成功能。 综上所述，这个工具的核心知识点包括： 1. 自动完成技术：利用JavaScript实现实时文本输入的预测...
《jQuery标签输入自动完成插件jquery.tagsinput-revisited.js详解》 在Web开发中，用户交互体验至关重要，其中一种常见的需求就是实现输入框的自动完成功能，这能够提升用户的输入效率并提供良好的用户体验。jQuery...
标题中的“输入框自动完成功能”指的...总之，“输入框自动完成功能”是一个涉及前端JavaScript技术、用户体验设计以及数据处理的重要特性。通过合理运用jQuery和其他前端技术，可以实现高效且用户友好的自动完成功能。
实现JS自动完成功能，我们可以利用jQuery库，这是一个轻量级、高性能的JavaScript库，提供了许多方便的DOM操作和事件处理方法。jQuery使得在不同浏览器间编写兼容的代码变得更加容易。 在JS中实现中文拼音自动完成...
标题中的"Ajax jQuery 实现自动完成的所有js和css文件"是指使用Ajax技术和jQuery库来创建一个功能，即在用户输入时提供自动填充建议。这种功能常见于搜索框、表单输入等场景，能够提高用户体验，减少用户手动输入的...
JavaScript仿照Google自动完成是一种常见的前端开发技术，用于在用户输入时提供实时的搜索建议或自动填充功能。这种技术在网站搜索、表单填充、地址栏提示等方面有广泛应用，极大地提高了用户体验。以下将详细介绍...