Ajax文本框输入提示

最新推荐文章于 2018-11-12 15:01:36 发布
最新推荐文章于 2018-11-12 15:01:36 发布 · 161 阅读 · 0
文章标签：

#Ajax #ASP #JavaScript #VBScript #SQL Server #ViewUI

今天我来做一个Ajax文本框输入提示的例子:

前台文件

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>文本框输入提示</title>
<styletype="text/css">...
<!--
.keyword{...}{width:150px;height:20px;border:#0066FF1pxsolid;}/**//*文本框样式*/
#keytishi{...}{width:150px;height:auto;border:#0066FF1pxsolid;position:absolute;display:none;}/**//*提示层样式*/
#keytishiul{...}{margin:0;}/**//*提示层样式*/
#keytishiulli{...}{margin:0;list-style-type:none;line-height:16px;height:16px;font-size:12px;padding:2px;}/**//*提示层样式*/
#keytishiullia{...}{display:block;width:150px;height:16px;text-decoration:none;}/**//*提示层样式*/
#keytishiullia:hover{...}{background-color:#0099FF;}/**//*提示层样式*/
-->
</style>
<scripttype="text/javascript">...
<!--

//建立XMLHttpRequest对象
varxmlhttp;
try...{
xmlhttp=newActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newXMLHttpRequest();
}catch(e)...{}
}
}

functiongetKeyWord()...{
varobj=document.getElementById("search");//获取文本域对象
if(obj.value=="")...{
return;
}
vartop=0;
varleft=0;
while(obj)...{//此循环得到文件域对象在页面中的绝对位置
top+=obj["offsetTop"];
left+=obj["offsetLeft"];
obj=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);
}
functioninput(str)...{
document.getElementById("search").value=str;//从提示层选择你需要的数据填充到文本框
document.getElementById("keytishi").innerHTML="";//清空提示层
document.getElementById("keytishi").style.display="none";//设置提示层不可见
}
//-->
</script>
</head>
<body>
<inputtype="text"class="keyword"id="search"name="search"onkeyup="getKeyWord();"onclick="getKeyWord();"/>
<divid="keytishi"></div><!--提示层-->
</body>
</html>

后台文件[input.asp]

<%...@LANGUAGE="VBSCRIPT"CODEPAGE="65001"%>
<!--#includefile="conn.asp"-->
<%...
dimrs
dimsql

dimkeyWords

keyWrods=Request("keyword")

Setrs=Server.CreateObject("ADODB.Recordset")
sql="select*fromking_testwherekeywordlike'%"&keyWrods&"%'"
rs.opensql,conn,1,1
ifnot(rs.bofandrs.eof)then
Response.Write("<ul>")
dowhilenotrs.eof
%>
<li><ahref="javascript:void(null);"onclick="input('<%Response.Write(escape(rs("keyword")))%>');"><%...Response.Write(escape(rs("keyword")))%></a></li>
<%...
rs.movenext
loop
Response.Write("<ul>")
iteye_1732
关注
文本框输入前提示(ajax组件)
07-31
<<ajax in action >><br>第10章的例子代码.<br>原书的代码太乱,还有错.<br>经我调试后,共享给大家.<br>并且在关键的代码段提供了详细的注释.<br><br>做人要厚道,大家下了一定要顶哦.<br><br>把typeAheadXML_refactored.htm设成初始页
ajax 文本框提示
spring123tt的专栏
08-02 1740
先贴效果图吧：                                        美化方面，不足，有目共睹哈。。。 支持鼠标移动点击、键盘上下键回车选中 先贴HTML:         再贴CSS: .input_Type{    background-color: #FEF0C9; } #ul_background{   background-co
ajax实现输入框提示信息
11-12 1777
  HtmlPage1.html &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; function loadXMLDoc(str) {
ASP.NET AJAX文本框自动提示功能
ccaakkee的专栏
12-09 4884
当用户在输入网站地址的文本框中输入的时候会自动弹出一个下拉菜单，显示最近查询过的网站，并不断根据输入文本的内容缩小范围。比如：当输入“w”的时候，会列出所有w开头的网址，当输入到“www.f”的时候，就只显示www.felixwoo.com了。当点击下拉菜单中的一个网址后，会自动完成文本框中的内容。整个过程和IE的地址栏效果类似。显示效果如图 这个功能是通过ASP.NET AJAX A
一个Ajax文本框输入提示效果.rar
07-10
一个Ajax文本框输入提示效果,当用户输入与搜索内容相匹配的字符时，下拉框中会适时显示相关的内容提示，用户可选择这些相关的内容，进而下拉打开搜索页，免去输入的麻烦，提升用户体验。 　注：顺利测试本实例，请...
提升用户体验的Ajax文本框输入提示效果
###Ajax文本框输入提示效果知识点总结 ####Ajax技术 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。Ajax技术的核心是JavaScript对象XMLHttpRequest，它...
Ajax文本框输入提示附加数据库即可
09-17
总结，实现Ajax文本框输入提示的关键在于：前端捕获用户输入、发送Ajax请求、处理服务器返回数据；后端接收请求、查询数据库并返回数据。这样的功能提升了用户体验，让用户在输入时就能快速获取相关信息，而无需等待...
js文本框输入内容智能提示效果
11-23
在本例中，我们探讨的是如何实现一个基于JS的文本框输入内容智能提示功能，这种功能常见于搜索引擎、输入框自动补全等场景，可以极大地提升用户输入体验。 1. **事件监听**： 在这个例子中，使用了`keyup`事件来...
使用ASP.NET AJAX开发文本框自动提示功能
月黑杀人夜，风高放火时！
12-12 1454
这两天尝试使用ASP.NET AJAX Extensions给ThinkPage的PageRank查询增加了文本框自动提示功能。当用户在输入网站地址的文本框中输入的时候会自动弹出一个下拉菜单，显示最近查询过的网站，并不断根据输入文本的内容缩小范围。比如：当输入“w”的时候，会列出所有w开头的网址，当输入到“www.f”的时候，就只显示www.felixwoo.com了。当点击下拉菜单中的一个网址后
自动提示的文本框(加Ajax异步交互)
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
09-08 1001
自动提示的文本框(加异步交互)
Ajax实现输入框动态提示
m0_37727198的博客
08-03 886
https://www.cnblogs.com/gdp176119/p/9415511.html 发表在我的博客园了，这里引用一下。
具有Ajax自动建议功能的TextBox控件(附源码)
12-16 161
近期准备翻译一系列Ajax、Javascript方面相关的Web开发文章，以强化专业学习和提升英语读写能力，欢迎大家拍砖挑错，不甚感激！ 原文链接：http://codeproject.com/KB/ajax/AJAXAutoSuggest.aspx 版权归Cassio Alves所有 源码下载 引言 这是我前段时间制作的具有Ajax 自动建议功能的...
AJAX实现文本框输入自动提示功能
死牛崇拜的专栏
11-19 9784
     我认为任何绚丽的效果都是被客户逼出来，因为客户总是想花最少的银子买到最好的软件，就像我们总是想花最少的钱买到最好的货物一样。这周，霸蛮的客户又霸蛮的要我开发一个新功能，原因是因为他们的老总喜欢这东西。我晕，难道你做这个软件就是为了讨好你的上级？我用我充满智慧的头脑思考着我眼前这个客户是否脑子有问题！开发就开发吧，不就写点代码嘛！    所谓文本框输入提示，就是指在文本框中输入一个字符时，提示出跟该字符相应的列表，以方便用户进行选择，先SHOW一下效果图：    怎么样，是不是很漂亮？（本人自认为我
ASP.NET输入文本框自动提示功能
diaobiao8107的博客
05-11 344
在ASP.NET Web开发中会经常用到自动提示功能，比如百度搜索。我们只要输入相应的关键字，就可以自动得到相似搜索关键字的提示，方便我们快速的输入关键字进行查询。 那么在ASP.NET中，如果我们需要做个类似的效果，该如何做到呢？ 很简单，我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了。这个插件的官方地址为：JQuery A...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值