求类似google 输入提示 楼主你要的就是做现在做的。不过我下奶的是有点问题。看贴:http://topic.csdn.net/u/20081025/00/c3def8eb-06af-4e98-891e-6dc4fc328030.html 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你去google里面搜索下,dwr模拟goolge吧,spring+dwr的,早阵子我还做过,那东西很好理解的. 前段时候写的, 供参考http://hansir.cn/blog/2008/20080616-27.html http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx在ie7下不太好使 google下载 Index.html文件:<html><head><script>var xmlHttp;function createXMLHttpRequest(){ if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }}function startRequest(data){ createXMLHttpRequest(); try { xmlHttp.onreadystatechange = function(){handleStateChange(data);} xmlHttp.open("GET", "data.xml", true); xmlHttp.send(null); } catch(exception) { alert("xmlHttp Fail"); }}function handleStateChange(data){ if(xmlHttp.readyState == 4) { if (xmlHttp.status == 200 || xmlHttp.status == 0) { var root = xmlHttp.responseXML.documentElement; try { var info = root.getElementsByTagName(data)[0]; var text = info.firstChild.nodeValue; var array = text.split("-"); var obj = document.getElementById("div1"); obj.style.display = "block"; obj.innerHTML = ""; for(var i=0; i<array.length; i++) { obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>"; } } catch(exception) { var obj = document.getElementById("div1"); obj.style.display = "block"; obj.innerHTML = ""; } } }}function textChange(data){ if(data == "") { var obj = document.getElementById("div1"); obj.style.display = "block"; obj.innerHTML = ""; } else { startRequest(data); }}function spanClick(){ var spanObj=event.srcElement; var textObj = document.getElementById("text1"); textObj.value = spanObj.innerHTML; var divObj = document.getElementById("div1"); divObj.style.display = "none"; divObj.innerHTML = "";}var oldSpanObj;function spanMouseOver(){ if(oldSpanObj != null) { oldSpanObj.style.backgroundColor = "#FFFFFF"; } var spanObj=event.srcElement; spanObj.style.backgroundColor = "#FF7788"; oldSpanObj = spanObj;}</script></head><body><input type="text" id="text1" onpropertychange="textChange(this.value);" /><br><div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF"></div></body></html>注:position:absolute实现div浮动且显示时不占位data.xml文件:<?xml version="1.0" encoding="GB2312"?> <root> <d>d1</d> <dd>dd1-dd2</dd> <ddd>ddd1-ddd2-ddd3</ddd> <dddd>dddd1-dddd2-dddd3-dddd4</dddd> <ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd></root>将以上文件部署在iis中,因为有xmlhttp请求,直接双击没有效果。测试方法:输入d,联想出d1,d2 输入dd。联想出dd1,dd2 要用复合框 ajax 用AJAX实现google输入自动完成的简单模拟比较简单的模拟,文本框输入CompanyName,然后搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,然后实现自动完成<connectionStrings> <add name="myData" connectionString="server=localhost;database=Northwind;uid=XXX;pwd=XXX"/> </connectionStrings>四个文件1. AutoComplete.htm2. AutoComplete.aspx3. AutoComplete.aspx.cs4. list.xslt文件 用于显示xml数据详细过程和页面代码请参考:http://wguorun.blog.163.com/blog/static/163062382007101651812630/ 巧了,前几天刚写过一个,由于提示的内容太多,后来又加入了分页的功能,不过代码写得有点乱,就不拿出来了。google、百度一下,网上应该很多的 http://www.cnblogs.com/ustbwuyi/archive/2006/07/17/452700.html 我喜欢写一些通用的东西.楼主说的这个功能,在我现在的项目中,就是自己写的.前台需要在input type="text" 框中设置一个onkeydown事件,传入一个对像数组和一个字符串,后台根据字符串,得到指定的SQL语句和当前文本框的值,到数据库查询到相应的记录,这个记录包括好多字段.JS根据返回的值,列出一个列表,供用户选择,选择后,除了填充这个文本框以外,对应的其他字段还要填充onkeydown事件传入的对像数组对应的页面元素,如一些input或font,td等.支持翻页,键盘操作.这个东西写完之后, 项目组开发人员用的时候,只需定义一个SQL语句,然后在input type='text'中加一个事件即可. 对用DWR包 很好用的 大伙帮个忙:这个/^.[^:#\[\.,]*$/正则表达式什么意思 在客户端如何实现这个无刷新的需求? 怎样将对象里面某一项后面所有项值清空? ie 图形移动 残影 弹出一个小窗口 jquery知识 请问js如何生成类似md5那样的唯一标识? 怎么实现所见既所得,如DREAMWEAVER的编辑网页的功能? select对象的问题! 打开一个新窗口时可以去掉菜单栏,但是如果是第一个页面怎么去掉。用javascript做不到吧,那么修改注册表可以做到吗? 如何在网页中嵌入一个JAVABEAN控件? 弹出一个层,然后,鼠标可以移动到弹出层上,点上面的链接
http://hansir.cn/blog/2008/20080616-27.html
在ie7下不太好使
<html>
<head>
<script>
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(data)
{
createXMLHttpRequest();
try
{
xmlHttp.onreadystatechange = function(){handleStateChange(data);}
xmlHttp.open("GET", "data.xml", true);
xmlHttp.send(null);
}
catch(exception)
{
alert("xmlHttp Fail");
}
}
function handleStateChange(data)
{
if(xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200 || xmlHttp.status == 0)
{
var root = xmlHttp.responseXML.documentElement;
try
{
var info = root.getElementsByTagName(data)[0];
var text = info.firstChild.nodeValue;
var array = text.split("-");
var obj = document.getElementById("div1");
obj.style.display = "block";
obj.innerHTML = "";
for(var i=0; i<array.length; i++)
{
obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>";
}
}
catch(exception)
{
var obj = document.getElementById("div1");
obj.style.display = "block";
obj.innerHTML = "";
}
}
}
}
function textChange(data)
{
if(data == "")
{
var obj = document.getElementById("div1");
obj.style.display = "block";
obj.innerHTML = "";
}
else
{
startRequest(data);
}
}
function spanClick()
{
var spanObj=event.srcElement;
var textObj = document.getElementById("text1");
textObj.value = spanObj.innerHTML;
var divObj = document.getElementById("div1");
divObj.style.display = "none";
divObj.innerHTML = "";
}
var oldSpanObj;
function spanMouseOver()
{
if(oldSpanObj != null)
{
oldSpanObj.style.backgroundColor = "#FFFFFF";
}
var spanObj=event.srcElement;
spanObj.style.backgroundColor = "#FF7788";
oldSpanObj = spanObj;
}
</script>
</head>
<body>
<input type="text" id="text1" onpropertychange="textChange(this.value);" />
<br>
<div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF">
</div>
</body>
</html>注:position:absolute实现div浮动且显示时不占位data.xml文件:
<?xml version="1.0" encoding="GB2312"?>
<root>
<d>d1</d>
<dd>dd1-dd2</dd>
<ddd>ddd1-ddd2-ddd3</ddd>
<dddd>dddd1-dddd2-dddd3-dddd4</dddd>
<ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd>
</root>
将以上文件部署在iis中,因为有xmlhttp请求,直接双击没有效果。测试方法:输入d,联想出d1,d2
输入dd。联想出dd1,dd2
比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成<connectionStrings>
<add name="myData" connectionString="server=localhost;database=Northwind;uid=XXX;pwd=XXX"/>
</connectionStrings>四个文件
1. AutoComplete.htm
2. AutoComplete.aspx
3. AutoComplete.aspx.cs
4. list.xslt文件 用于显示xml数据详细过程和页面代码请参考:http://wguorun.blog.163.com/blog/static/163062382007101651812630/
前台需要在input type="text" 框中设置一个onkeydown事件,传入一个对像数组和一个字符串,
后台根据字符串,得到指定的SQL语句和当前文本框的值,到数据库查询到相应的记录,这个记录包括好多字段.
JS根据返回的值,列出一个列表,供用户选择,选择后,除了填充这个文本框以外,对应的其他字段还要填充onkeydown事件传入的对像数组对应的页面元素,
如一些input或font,td等.
支持翻页,键盘操作.这个东西写完之后, 项目组开发人员用的时候,只需定义一个SQL语句,然后在input type='text'中加一个事件即可.
很好用的