在火狐上样式可能有点问题，但这容易解决；按住方向键不放连续移动选择功能暂时没有，待高人解决
html代码
js名称antuo.js
js名称autofoot.js
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜素自动完成</title>
<style type="text/css">
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divc {
border:1px solid #cccccc;
}
.mouseover {
color:#ffffff;
background-color:highlight;
width:100%;
cursor:default;
}
.mouseout {
color:#000000;
width:100%;
background-color:#ffffff;
cursor:default;
}
</style>
</head>
<script language="javascript" src="antuo.js"></script>
<body>
<h1>Autocomplete Function</h1>
<div align="center">
<input id="auto" onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)">
</div>
<div id="divc">
<!--this is the autocomplete container.-->
</div>
</body>
<script language="javascript" src="autofoot.js"></script>
</html>
js名称antuo.js
<!--
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 = "160";
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 :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) { 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)};
var re = new RegExp("(" + _v + ")","i");
div.style.lineHeight="140%";
div.className = "mouseout";
if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
div.style.fontFamily = "verdana";
_o.appendChild(div);
}};
jsAuto.prototype.display=function() { with(this)
{
if(_f&&_v!="")
{
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visible";
}
else
{
_o.style.visibility="hidden";
}
}};
jsAuto.prototype.handleEvent=function(fValue,fID,event) { 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);
re = new RegExp("^" + fValue + "", "i");
_o.innerHTML="";
for(var i=0; i<_msg.length; i++)
{
if(re.test(_msg[i]))
{
_i.append(_msg[i]);
_f = true;
}
}
_i ? _i.display() : 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;");
js名称autofoot.js
<!--
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,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,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,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,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,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,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,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,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,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,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,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");
/*jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");*/
//-->
0
顶
顶
0
踩
踩
分享到：
发表评论
相关推荐
在IT行业中，搜索自动提示是一项常见的用户体验优化技术，它能够极大地提高用户在网站或应用程序中的搜索效率。这个压缩包文件的标题是“搜索自动提示例子（源代码）”，表明其中包含了一个实现搜索自动提示功能的源...
搜索自动提示，通常被称为Autotips，是许多搜索引擎和应用程序中的一个功能，它在用户输入查询时提供实时的建议或预测。这个功能极大地提升了搜索效率，减少了用户输入完整查询词的时间，同时也帮助用户发现了可能...
基于java的开发源码-搜索自动提示 Autotips.zip 基于java的开发源码-搜索自动提示 Autotips.zip 基于java的开发源码-搜索自动提示 Autotips.zip 基于java的开发源码-搜索自动提示 Autotips.zip 基于java的开发源码-...
在这个“搜索自动提示列表的dwr实现实例”中，我们将探讨如何利用DWR实现一个动态、高效的搜索建议功能。 1. **DWR的基本概念** DWR的核心思想是创建JavaScript对象，这些对象可以直接调用服务器上的Java方法，就...
在IT领域，搜索自动提示（通常称为Autotips或AutoComplete）是一项常用的功能，它极大地提高了用户在输入查询时的效率。"搜索自动提示 Autotips.7z"可能是一个包含资源或代码实现的压缩包，用于帮助开发者或用户理解...
jQuery搜索自动提示是一种常见的前端开发技术，用于提升用户体验，特别是在数据检索或内容过滤时。它允许用户在输入框中输入关键词时，系统自动显示出与之相关的建议内容，从而快速找到目标信息。本压缩包文件...
综上所述，jQuery Autocomplete插件以其强大的功能和易用性，成为了前端开发中实现搜索自动提示的首选工具。通过理解和掌握其核心功能和实现方法，开发者可以轻松地在项目中集成这一特性，提升用户体验。
在IT领域，搜索自动提示（Autotips）是一种常见的用户界面功能，它为用户提供实时的、预测性的搜索建议，以提高搜索效率和用户体验。在这个名为"基于Java的搜索自动提示 Autotips.zip"的压缩包中，我们可以推测它...
**标题解析：** "js跨域实现autocomple 仿百度搜索自动提示" 这个标题指出我们要讨论的是使用JavaScript（js）来实现一个跨域的自动补全功能（autocomple），并且这个功能是模仿百度搜索的自动提示效果。 **关键词...
在Java中实现搜索自动提示（Autotips）功能是一项常见的需求，特别是在开发Web应用程序、桌面应用或移动应用时，可以极大提升用户体验。搜索自动提示通常指的是用户在输入查询关键词时，系统能够实时预测并显示可能...
本项目"AJAX百度搜索自动提示效果+JQuery滑动效果"结合了这两者的优势，为用户提供了类似百度搜索那样的实时自动提示功能，并辅以jQuery的平滑滑动效果，让网页界面更加生动且易用。 首先，我们来详细探讨AJAX技术...
jQueryUI实现搜索自动提示 得下载jQueryUI的jar包 网上一搜一大把，这里就不提供了
Java 源码：搜索自动提示（Autotips）是一个常见的功能，在许多应用程序和网站中都能看到，例如搜索引擎、文本编辑器或者IDE（集成开发环境）等。这个压缩包文件 "搜索自动提示 Autotips.rar" 可能包含了实现这一...
Ajax 仿百度搜索自动提示功能是一种常见的前端交互设计，它极大地提升了用户的搜索体验。在网页中，用户在搜索框输入关键字时，系统能够实时地根据输入内容动态显示相关的搜索建议，这种功能在很多网站，尤其是搜索...
在本实例中，我们主要探讨的是如何利用Java编程语言实现搜索自动提示功能，这通常被称为Autotips。这种功能常见于各种搜索引擎、浏览器地址栏以及许多应用中的搜索框，能够根据用户输入的关键字实时提供匹配建议，...
JAVA源码搜索自动提示Autotips
jQuery Autocomplete插件是一款非常实用的前端工具，它为用户提供了搜索自动提示的功能，极大地提高了交互体验。在本篇文章中，我们将深入探讨如何利用该插件实现中文搜索自动提示，并通过实例解析其核心功能和应用...
java资源搜索自动提示 Autotips提取方式是百度网盘分享地址
在安卓应用开发中，搜索自动补全功能是一个非常常见的需求，它能提升用户的搜索体验，让用户更快找到所需信息。这个压缩包"安卓搜索相关相关-实现搜索的自动补全功能.rar"显然包含了实现这一功能的相关代码和资源。...
Ajax搜索自动提示示例js代码简略点拨。