[ 原创 ]第一次在js版发贴，模仿IE自动完成功能，支持Firefox.

BlueDestiny 2006-02-22 03:22:32
我的英文就烂了一点，不对的地方请告知一声。

顺便求一下医，鼻炎有什么好药可以制好的吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
cursor:default;
}
.mouseout {
color:#000000;
background-color:#ffffff;
cursor:default;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--

// script by blueDestiny
// email : blueDestiny [at] 126 . com

// Object: jsAuto
// browser: ie, mf.
// example:

// step1 :
// create autocomplete container, return object and bind event to the objce, and
///create a new jsAuto instance:
// <div id="divautocomplete"></div>
// var autocomplete = new jsAuto("autocomplete","divautocomplete")
// handle event:
// autocomplete.handleEvent(value, returnObjectID)
// <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete")>

// step2 :
// add autocompete item:
// autocomplete.item(string)
// string must be a string var, you can split the string by ","
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")

// http://www.never-online.com

function jsAuto(instaceName,objID)
{
this._msg = [];
this._o = document.getElementById( objID );
if (!this._o) return;
this._f = null;
this._i = instaceName;
this._r = null;
this._v = null;
this._o.style.visibility = "hidden";
this._o.style.lineHeight = "120%";
this._o.style.position = "absolute";
this._o.style.zIndex = "9999";
return this;
};

// mouseEvent.
jsAuto.prototype.domouseover=function(obj)
{
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(",");
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);
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.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)
{
_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) { with (this)
{
var re;
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");

if( fValue=="" ) return;
_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");
}};
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')" id="auto">
</div>
<div id="divf">
Power By Miracle, never-online
</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");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
</SCRIPT>
</BODY>
</HTML>
...全文
387 35 打赏 收藏 转发到动态 举报
写回复
用AI写文章
35 条回复
切换为时间正序
请发表友善的回复…
发表回复
HHH3000 2006-03-01
  • 打赏
  • 举报
 回复
支持~~学习~~

记得原来阿信也写过类似的东西~~

现在找不到了~~
chjpeng 2006-03-01
  • 打赏
  • 举报
 回复
不错
JK_10000 2006-02-27
  • 打赏
  • 举报
 回复
关于前台验证的看法：
关于加自定义属性，十分支持
关于具体的dataType类型，可能是见仁见智。通常我的做法是：可以在onblur时就进行的验证，放在这个属性（公司里对应的自定义属性叫contentType）里；必须输入验证放在另一个属性里；其它特殊的验证（如两个日期比大小等）则不属于通用功能。但是最重要的一点是，“特殊验证（由页面代码同事完成）风格”要很容易的跟“通用验证风格”一致。

关于前台分页，
已在你的部落回复了

BlueDestiny 2006-02-27
  • 打赏
  • 举报
 回复
@jk
并不只是必须输入验证等功能，按理说，封装成htc，或不封装成htc，都是相似的，无非都是调用事先准备的脚本来脚证，我的方法就是把每个需要验证的element，加上attribute，如：<input dataType="digit">
<input dataType="notEmpty">
<input dataType="range">
..等，即使是select或者radio,checkbox，也可以验证，并非是简单的验证，空值，以及整形。
加上attribute之后，可以方便的验证表单的合法性。


还有一个问题想请教你一下：
先看我写的一个东西：
http://blog.csdn.net/BlueDestiny/archive/2006/02/16/600350.aspx
问一下，如果我要分割table以及一些不方便分割的标签时，假定分页字节设为 6 ：
比如：
<TABLE border=1>
<TR>
<TD>aa</TD>
<TD>bb</TD>
</TR>
</TABLE>
要把上面的table分割成分页的形式，而保持其样式呢

我所想到的，就是用正则匹配，或者字符串分割时与我在脚本中预先定义的不可分割标签进行比较，从而得到继承的标签。好像好麻烦？
JK_10000 2006-02-27
  • 打赏
  • 举报
 回复
P.S: 关于上次的那个一般form形式下的validator，我还是觉得还是可以封装htc的...
-----------------

我一直没有反对把validate验证封装到htc里
只是不支持把mandatory验封装到htc里，因为想不出把"必须输入验证"封装到htc里有什么好处
JK_10000 2006-02-25
  • 打赏
  • 举报
 回复
路过，不错不错，
另:
几点建议

---------
jsAutoInstance.item("a-start,b-start,c-start");
如果数据里出现字符串里的分隔符的话，
会让问题变得复杂

---------
<div id="divc">
<!--this is the autocomplete container.-->
</div>
隐藏container div时建议用display，而不用visibility，因为visibility=hidden后，对象还占有空间，会影响页面效果。
例如，当window大小为500*500时，在输入框里输入d，再删除掉d，可以看到页面出现了异常的滚动条

---------
失去焦点时，应该隐藏选择层，不然在以下的情况下给用户造成不便：
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"><br><input>
用户在combox里输入d，再按tab键

---------
选项太多时应该有滚动条

笨笨兔兔兔兔兔 2006-02-25
  • 打赏
  • 举报
 回复
*^_^*
BlueDestiny 2006-02-25
  • 打赏
  • 举报
 回复
@ jk

谢谢你提的建议。我抽空也会按你和大家提的建议完善一下。

P.S: 关于上次的那个一般form形式下的validator，我还是觉得还是可以封装htc的...
ice_berg16 2006-02-25
  • 打赏
  • 举报
 回复
这个东西我以前也做过一个，不过那时候只支持IE，
数据是从数据库里取得生成XML，前台用DOM来做的。
jspadmin 2006-02-24
  • 打赏
  • 举报
 回复
呵呵
鼻炎有什么好药可以制好的吗？
答：可以使用四环素眼膏，挤入少量至鼻腔。或者采用激光治疗
Fufuokcom 2006-02-24
  • 打赏
  • 举报
 回复
已经做得很不错了。研究一下。
ljlyy 2006-02-24
  • 打赏
  • 举报
 回复
顶！
linky520 2006-02-24
  • 打赏
  • 举报
 回复
up 赫赫
uuq 2006-02-24
  • 打赏
  • 举报
 回复
不错
BlueDestiny 2006-02-23
  • 打赏
  • 举报
 回复
csdn不支持修改自己的贴子内容，难贴得要命，出一个小bug都得重贴，

改进了的自动完成功能到我blog去看吧

http://blog.csdn.net/BlueDestiny/archive/2006/02/22/605875.aspx
BlueDestiny 2006-02-23
  • 打赏
  • 举报
 回复
改进了一下，可以用方向键上下移动，并且，如果在第一个节点里按向上键，即到最后一个元素，最后一个元素按下键，到首元素；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.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">
<!--

// script by blueDestiny
// email : blueDestiny [at] 126 . com

// Object: jsAuto
// browser: ie, mf.
// example:

// step1 :
// create autocomplete container, return object and bind event to the object, and
///create a new jsAuto instance:
// <div id="divautocomplete"></div>
// var autocomplete = new jsAuto("autocomplete","divautocomplete")
// handle event:
// autocomplete.handleEvent(value, returnObjectID)
// <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)>

// step2 :
// add autocompete item:
// autocomplete.item(string)
// string must be a string var, you can split the string by ","
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")

// http://www.never-online.com

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";
return this;
};

jsAuto.prototype.directionKey=function() { with (this)
{
var e = _e.keyCode ? _e.keyCode : _e.which;
var l = _o.childNodes.length;

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])
{
_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;
//_s = false;
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(",");
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)
{
_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;
_x = [];
_e = event;
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");

if( fValue=="" ) return;
_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");
_f ? _i.directionKey() : "";
}};
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)" id="auto">
</div>
<div id="divf">
Power By Miracle, never-online
</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");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
</SCRIPT>
</BODY>
</HTML>
meizz 2006-02-23
  • 打赏
  • 举报
 回复
支持原创！！支持JS基础研究！！
meizz 2006-02-23
  • 打赏
  • 举报
 回复
楼主的想法不错，你可以参考一下IE的地址栏那个自动提示来做：
1.失去焦点即应该隐藏层
2.输入的内容与提示的内容完全匹配之后应该隐藏这个提示项
3.方向键选择的时候在最后一个再往下就应该会到最前一项
4.提示项的显示你总得给定一个显示条目吧，难道我100条也不给个滚动条？
5.有滚动条的时候焦点项必须出现在可视范围内
6.还有就是在大容量数据时的效率问题，代码优化问题，有疑问可以找我
ttyp 2006-02-23
  • 打赏
  • 举报
 回复
双击出选择，甚至不要用键盘都可以输入了

ttyp 2006-02-23
  • 打赏
  • 举报
 回复
再加
1.esc取消选择
2.失去焦点取消选择
加载更多回复（15）
超级仿百度 自动搜索提示下拉框
模仿百度搜索提示框做的，兼容IE6，IE7，IE8及FireFox火狐浏览器，非常标准的Javascript对象版，下载绝不吃亏，很值得一看，并且可直接用于实际的项目开发中，得心应手，屡试不爽！
随笔小记—解决火狐浏览器自动向http://detectportal.firefox.com发包的问题
由于edge和Google浏览器不能抓本地包（具体原因也说不清楚），所以本人使用了火狐浏览器 但是火狐会一直给http://detectportal.firefox.com发送请求，这就造成burp suite上很多没有用的包影响观感了 百度了一下，很多人的解决办法就是： firefox地址栏输入 about:config，然后搜索找到 network.captive-portal-service.enabled，设置为false 但是我发现这样做并没有效果 随后尝试是不是还要关闭别的默认配置
通过火狐的 send.firefox.com 快速分享文件给好友
众所周知上网时分享文件是一个非常常用的功能，现有比较方便的方法有 QQ 、百度网盘和微信传文件 优缺点有比较明显： QQ 办公利器，老牌工具除了需要加好友无太大缺点 百度网盘 再大的文件都可以，但是不开超级会员不配下载 微信 “微信没有传文件功能” 不过呢，火狐提供了一个快速分享文件的功能，登陆账号后可以分享最大 2.5G 的文件，https://send.firefox.com/，上传速度和...
Burp抓包经常出现detectportal.firefox.com解决办法（附图）
Burp抓包经常出现detectportal.firefox.com解决办法一、问题二、解决办法 环境：win10 工具：Firefox浏览器 一、问题 在firefox用FoxyProxy Standard抓包时，总是出现detectportal.firefox.com； 二、解决办法 在浏览器输入 about:config； 在继续搜索 network.captive-portal-service.enabled，然后双击，即可将true值修改为false。 ...
【疑难杂症】Firefox 火狐浏览器 关闭到 http://detectportal.firefox.com 的流量
日期：2019-07-18 00:02:58 作者：Bay0net 介绍： 0x01、 问题描述 火狐浏览器的时候，抓包会出现很多这样的数据包。  具体的 URL http://detectportal.firefox.com/success.txt 看一下域名，是 x.firefox.com，很明显就是浏览器自身的问题。 0x02、解决办法 在浏览器...
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章