mootools实现搜索提示文本框-技术开发专区

mootools实现搜索提示文本框

作者：ITPUB论坛编辑： nancy 2008-04-08 00:00

【IT168技术文档】

听一网友问怎么做一个像Google搜索一样，写入搜索关键字就提示相关信息。前两天有点时间，就想自己去做做看，现在完成了提示的功能。代码如下：
mootools框架：http://www.cnblogs.com/Files/mimengjiangnan/mootools-release-1.11.js
HTML代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTextBox.aspx.cs" Inherits="AjaxTextBox" %>
<!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 runat="server">
<title>AjaxTextBox</title>
<script type="text/javascript" src="mootools-release-1.11.js" ></script>
<script type="text/javascript" >
var values;
window.addEvent("domready",function(){
$("ajaxtextbox").addEvent("keypress",function(e){
var keychar;
var keynum;
if(window.event) // IE
            {
if(window.event.keyCode==8){//判断Backspace键
                    values=values.substr(0,values.length-1);
$("ajaxtextbox").value=values;
}
keynum = window.event.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
            {
if(e.which==8){
values=values.substr(0,values.length-1);
$("ajaxtextbox").value=values;
}
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
if(/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(keychar)){//判断是不是中文，英文，数字
                $("ajaxtextbox").value+=keychar;
values=$("ajaxtextbox").value;
}
if($("ajaxtextbox").value==""){
return;
}
var url="AjaxTextBox.aspx?value="+$("ajaxtextbox").value;
new Ajax(url,{method:'post',
onComplete:function(){
$("msg").innerHTML=this.response.text;
if($("ajaxtextbox").value.length>values.length){
$("ajaxtextbox").value=values;
}
}
}).request();
});
});
function getMsg(obj){
$("ajaxtextbox").value=obj.innerHTML;
$("msg").innerHTML="";
}
</script>
</head>
<body>
<input type="text" id="ajaxtextbox" name="ajaxtextbox"  style="width:170px;" runat="server" />
<div id="msg" style="width:170px;"></div>
</body>
</html>

关注我们