// object method;
// 对象的原型方法// 添加项目;
// 可以用英文,分割
// JK说的是对的，我当初也是不想用逗号的
// 如果你不想用,分割，可自己改写这里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!="")
{
var l = _offset(_r);
_o.style.left = l.l;
_o.style.width = l.w;
_o.style.top = l.t + l.h;
_o.style.display = "block";
_o.style.display = "block";
}
else
{
_o.style.display="none";
}
}};
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;
//************************************************************************************
if(_v.length==2 && _v!=_Tmp)
{
searchProduct();
this._msg = [];
jsAutoInstance.item($('returnVal').value);
_Tmp=_v;
}
//************************************************************************************
// 这里用eval，返回生成的实例对象。
_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;");//************************************************************************************function searchProduct()
{
var prdName = $F('auto');
var url = 'ResponseProduct.aspx';
var pars = 'prdName=' + prdName ;var myAjax = new Ajax.Request(
url,
{
method: 'post',
asynchronous: 'false',
parameters: pars,
onComplete: showResponse
});}function showResponse(originalRequest)
{
//put returned XML in the textarea$('returnVal').value = originalRequest.responseText;
}//************************************************************************************//-->
</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
<asp:Label id="Label1" runat="server" Visible="False">Label</asp:Label>
</div>
<input id="returnVal">
<SCRIPT LANGUAGE="JavaScript">
<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
//************************************************************************************
//jsAutoInstance.item(BaseXmlDom.xml);
//************************************************************************************//-->
</SCRIPT>
</BODY>
</HTML>
如果用户输入之前相同的关键字,那么根暂存的关键字,在客户端缓存中索引对应的数据,然后实例化对象 jsAutoInstance.item("暂存数据");
不知道怎么弄,能不能具体点说~
http://community.csdn.net/Expert/topic/4936/4936389.xml?temp=.9786341
思路:
1.收集用户输入,如果用户不断的在输入文字(在打字),那么不执行ajax请求,只有
用户停下来(空闲的时候)才进行ajax请求.
误区: <input type=text onchange="funcAjaxAndShowList(this.value)">
这种基于onchange就请求数据的话,不仅会拖累服务器,而且对客户端的资源占用也很严重2.如果输入框的文字太短,比如用户只输入了一个或者两个字母,那就不要进行ajax请求.
我的建议是最起码要3个字符或以上才执行ajax请求.这样返回的结果不会太多,而且可能正是
用户需要的.3.每次返回的数据都要cache,因为用户如果继续输入字符的话,一般情况下返回的结果是cache里面的一个子集合.这时候就不需要ajax请求了,直接在客户端cache里面取.4.建议用json进行传输,这样的话,返回的结果可以直接cache不需要额外代码给你写端伪码吧
<input type=text onkeyup="javascript:funcAutoComplete(this.value)">
var timeoutId=null
var idleTime=600; //如果用户空闲时间超过600豪秒,则发送ajax请求
var xmlhttp=null;
var cache={keyword:"",result:[]}; //这个用来保存最近一次返回结果的数据
function funcAutoComplete(input){
if (timeoutId!=null){ //如果用户还在打字,继续收集用户输入
clearTimeOut(timeoutId)
timeoutId=null
}
//如果cache里的keyword是input的一部分,那么就在cache里面取result数据
if (eavl("/^"+cache.keyword+"/").test(input) && !cache.keyword.length){
var result=findInCache(cache) //在cache的结果里面查询
return showSuggestList(result) //显示 suggest 列表
}
if(!xmlhttp){
xmlhttp=createXmlHttpObject() //建立xmlhttp,这个函数自己实现
}else if(xmlhttp.readyState!=0){
xmlhttp.abort(); //如果上一个请求还在发送中,先取消他
}
xmlhttp.open("get","url.asp?wd="+input,true)
xmlhttp.onreadystatechange=function(o){
var result=json(o.responseText) //用json处理数据
showSuggestList(result) //显示 suggest 列表
cache=saveCache(result) //更新cache
}
timeoutId=setTimeout(){function(){xmlhttp.send(null)},idleTime}
}呵呵,没时间帮你写具体代码,但思路应该是这样,实现应该非常简单