Ajax文本框输入提示

Posted on | 十二月 3, 2009 | No Comments

<code><code>一个Ajax文本框输入提示的例子，用asp实现:

VB的脚本<!–more–>前台文件

<!–CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt–>

<!– …  <!   .keyword {…}{width:150px; height:20px; border:#0066FF 1px solid;}/**//*文本框样式*/  #keytishi {…}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}/**//*提示层样式*/  #keytishi ul {…}{ margin:0;}/**//*提示层样式*/  #keytishi ul li{…}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}/**//*提示层样式*/  #keytishi ul li a {…}{display:block; width:150px; height:16px; text-decoration:none;}/**//*提示层样式*/  #keytishi ul li a:hover {…}{background-color:#0099FF;}/**//*提示层样式*/ –>

<script type=”text/javascript”>// <![CDATA[
...     //建立XMLHttpRequest对象  var xmlhttp;  try...{      xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');  }catch(e)...{      try...{          xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');      }catch(e)...{          try...{              xmlhttp= new XMLHttpRequest();          }catch(e)...{}      }  }   function getKeyWord()...{      var obj = document.getElementById("search");//获取文本域对象      if(obj.value=="")...{          return;      }      var top=0;      var left=0;      while(obj)...{//此循环得到文件域对象在页面中的绝对位置          top += obj["offsetTop"];          left += obj["offsetLeft"];          objobj = obj.offsetParent;      }      xmlhttp.open(“get”,”input.asp?keyword=”+document.getElementById(“search”).value,true);      xmlhttp.onreadystatechange = function()…{          if(xmlhttp.readyState == 4)          …{              if(xmlhttp.status == 200)              …{                  if(xmlhttp.responseText!=”")…{                      document.getElementById(“keytishi”).innerHTML = unescape(xmlhttp.responseText);//把后台返回的数据填充到提示层                      document.getElementById(“keytishi”).style.left = left + “px”;//设置提示层的位置,左                      document.getElementById(“keytishi”).style.top = (top + 25) + “px”;//设置提示层的位置,上                      document.getElementById(“keytishi”).style.display = “block”;//设置提示层可见                  }else…{                      document.getElementById(“keytishi”).innerHTML = “”;//清空提示层                      document.getElementById(“keytishi”).style.display = “none”;//设置提示层不可见                  }              }              else…{                            }          }      }      xmlhttp.setRequestHeader(“If-Modified-Since”,”0″);      xmlhttp.send(null);  }  function input(str)…{      document.getElementById(“search”).value=str;//从提示层选择你需要的数据填充到文本框      document.getElementById(“keytishi”).innerHTML = “”;//清空提示层      document.getElementById(“keytishi”).style.display = “none”;//设置提示层不可见  }
// ]]></script>

<input id=”search” onclick=”getKeyWord();” onkeyup=”getKeyWord();” name=”search” type=”text” />

<!–提示层–>后台文件 [input.asp]

<!–.@LANGUAGE=”VBSCRIPT” CODEPAGE=”65001–><!–#include file=”conn.asp”–><!–.      dim rs      dim sql            dim keyWords            keyWrods = Request(“keyword”)            Set rs = Server.CreateObject(“ADODB.Recordset”)      sql = “select * from king_test where keyword like ‘%”&#038;keyWrods&#038;”%’”      rs.open sql,conn,1,1      if not (rs.bof and rs.eof) then      Response.Write(“</div>
<ul>”)      do while not rs.eof –>
 <li><a onclick=”input(‘&lt;%Response.Write(escape(rs(” href=”javascript:void(null);”>’);”&gt;<!–.Response.Write(escape(rs(“keyword”))–></a></li>
<!–.      rs.movenext      loop      Response.Write(“</div>
<ul>”)      end if      rs.close      set rs = nothing     conn.close      Set conn = nothing–>escape与unescape是用来编码的和解码的,这是为了避免汉字出现乱码，在XP + IE6,7,Firefox测试通过

</code></code>

相关文章:

1. Ajax实现页面loading效果
2. AJAX应用之草稿自动保存
3. 详解AJAX核心中的XMLHttpRequest对象
4. HttpModule，HttpHandler，HttpHandlerFactory简单使用
5. JavaScript 读写文件

评论|Comments

About

订阅

Search

Admin

• 注册
• 登录
• Wordpress
• XHTML
•