[ 原创 ]第一次在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>
...全文
406 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）
TRINAMIC旗下的TMC5130和TMC5130步进电机测试deom
TRINAMIC旗下的TMC5130和TMC5130步进电机测试deom
基于ESP32的Modbus RTU/RS485与MQTT协议转换网关系统：实现工业自动化数据采集与远程监控
工业自动化领域中，物联网技术通过嵌入式系统实现设备互联。Modbus RTU协议基于RS485物理层进行串行通信，而MQTT协议则支持无线传输与云平台对接。ESP32微控制器常被用作网关设备，承担数据采集、协议转换及实时通信任务。该系统能够完成传感器数据采集、智能设备管理与远程监控功能，实现工业现场数据的整合与传输。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
【DBO三维路径规划】基于多策略改进的蜣螂算法MSDBO多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）研究（Matlab代码实现）
内容概要：本文研究基于多策略改进的蜣螂优化算法（MSDBO）在多无人机协同集群三维环境下的避障路径规划问题，提出了一种以最低综合成本为目标的路径规划方法。目标函数综合考虑路径长度、飞行高度、环境威胁区域及飞行转角等关键因素，构建多维度代价模型，通过改进的蜣螂算法实现全局最优路径搜索。MSDBO算法引入多种优化策略，有效提升了原始蜣螂算法的收敛速度、全局搜索能力和避免陷入局部最优的能力。研究采用Matlab平台进行算法仿真与代码实现，验证了该方法在复杂三维空间中规划安全、高效、低能耗飞行路径的可行性与优越性，适用于多无人机系统的协同避障与航迹优化任务。; 适合人群：具备一定智能优化算法理论基础和Matlab编程能力，从事无人机路径规划、群体智能优化、自动控制、机器人导航等相关领域的科研人员、工程技术人员及研究生； 使用场景及目标：①解决多无人机在复杂三维动态环境中协同飞行的避障路径规划问题；②提升智能优化算法在航迹规划中的性能表现，降低飞行综合成本，实现安全避障、平滑航迹与高效导航的多重目标； 阅读建议：建议结合提供的Matlab代码进行仿真实验，深入理解MSDBO算法的改进机制与路径规划实现流程，可通过调整环境参数与权重系数进一步开展性能对比分析，并可将该方法迁移应用于其他群体智能优化与移动机器人路径规划场景。
三相交流异步电机模糊PID自适应控制【附说明文档】
内容概要：本文聚焦于三相交流异步电机的控制优化问题，提出一种基于模糊逻辑的PID自适应控制方法，旨在提升电机在复杂运行工况下的动态响应性能与抗干扰能力。通过Matlab仿真平台，系统阐述了模糊PID控制器的设计原理与实现过程，将模糊推理机制与传统PID控制有机结合，实现对比例、积分、微分参数的在线实时整定，有效应对电机系统固有的非线性、时变性等控制挑战。文档配套提供详细的说明材料，涵盖控制策略的构建思路、模糊规则库设计、隶属度函数选取及仿真模型搭建等关键环节，并通过仿真结果验证该方法在抑制超调、加快响应速度、增强系统鲁棒性方面的优越性能。; 适合人群：具备自动控制理论基础、电气工程及其自动化、机电一体化等相关专业的高年级本科生、研究生，以及从事电机驱动与控制领域研究的科研人员和技术开发者；熟悉Matlab/Simulink仿真环境者更适宜深入学习与实践。; 使用场景及目标：①应用于高性能交流电机驱动系统的设计与性能优化；②作为模糊控制与经典PID控制融合教学的典型案例；③服务于科研项目中对先进自适应控制算法的验证、对比与拓展研究；目标在于掌握模糊PID控制器的系统化设计流程，并具备将其迁移应用于其他非线性、时变系统的控制问题的能力。; 阅读建议：建议结合提供的Matlab代码与说明文档同步研读，重点剖析模糊规则制定逻辑、输入输出变量的模糊化处理及仿真模型的模块化构建，鼓励动手复现与调试，以深化对自适应控制机制与智能控制策略协同作用的理解。
统计分析软件SPAA-下载即用.zip
已经博主授权,源码转载自 https://pan.quark.cn/s/a4b39357ea24 一、课程信息 课程名：《Python统计与数据分析实战》 课程介绍 本课程结合Python进行统计与数据分析的原理讲解与实战，涵盖了绝大部分统计&数据分析模型，特别是当前比较主流的算法：参数估计、假设检验、线性回归、广义线性回归、非线性模型、Lasso、岭回归、广义可加模型、正交多项式模型、回归样条等；单因素和双因素方差分析；机器学习经常用到的主成分分析、因子分析、典型相关分析、聚类分析等；各种非参数统计模型，包括非参数统计推断、尺度推断、位置推断、列联表数据和属性数据分析、对数线性模型和分位回归模型、非参数核密度估计、非参数回归等。 全部模型和算法使用Python编程实现，实例驱动，聚焦实战，是成为高薪数据科学家和数据分析师的必备必学课程。 课程网址 全部课程视频在此处：B站网址 课程目录 第1章 数据描述性分析 第2章 参数估计 第3章 假设检验 第4章 回归分析 第5章 方差分析 第6章 判别分析与聚类分析 第7章 主成分分析、因子分析与典型相关分析 第8章 非参数统计 注：详细内容见文末的思维导图。 适用人群： （1）准备毕业后从事统计与数据分析行业的大学毕业生或准毕业生。 尤其是需要转向从事计算机编程、数据分析和机器学习方面工作的毕业生，或者需要提升技能以寻找高薪酬工作的准毕业生等。 （2）公司或企事业单位内部有数据分析和统计分析需求的从业人员。 （3）大学和科研院所的硕、博士研究生、青年教师等，特别是在管理学和人文社会科学等专业有量化研究需求的研究生和教师等 （4）需要转行从事数据分析方面工作，或有技能提升需求的初入职场者。 学习收获： （1）全程保姆式教学，学习路径合...
JavaScript

87,992

社区成员

224,688

社区内容

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

加载中

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

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

+ 用AI写文章