社区
Ajax
帖子详情
如何实现 Google 的输入前提示, 即Google Suggest
rliverpool
2008-09-06 10:57:34
如何实现 Google 的输入前提示, 即Google Suggest
...全文
265
10
打赏
收藏
如何实现 Google 的输入前提示, 即Google Suggest
如何实现 Google 的输入前提示, 即Google Suggest
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
10 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
f14f15
2008-12-27
打赏
举报
回复
document.getElementById('Ignore').focus();可以改为document.focus();这样就少一行<input type="text" id="Ignore" style="display:none;"/>
f14f15
2008-12-27
打赏
举报
回复
不错,非常感谢,正好用上
xchh1220
2008-09-17
打赏
举报
回复
就是用AJAX取数据,再画表格
zhengxiaomiao
2008-09-08
打赏
举报
回复
好好学习ajax 虽然还是一头雾水 呵呵
iasky
2008-09-08
打赏
举报
回复
很多AJAX框架的例子就是这个
luq885
2008-09-08
打赏
举报
回复
http://www.cnblogs.com/luq885/archive/2007/11/14/959105.html
现成的插件,用就是了
bobor_2008
2008-09-08
打赏
举报
回复
这样的例子源代码网上你google 一下就搞到了.
街头小贩
2008-09-07
打赏
举报
回复
百度应该找到!找不到去人民邮电下载这本书的示例代码中就有:
征服Ajax--Web 2.0开发技术详解
http://www.china-pub.com/29998
rliverpool
2008-09-07
打赏
举报
回复
上面是静态页面的示例,当要数据从数据库拿出是只要做如下操作,让arrList 数据在页面加载时由后台生成,示例代码如下
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = FillDataTable("select * from product_test");
StringBuilder strArr = new StringBuilder("<script type='text/javascript'>arrList = new Array();");
int intIndex = 0;
foreach (DataRow row in dt.Rows)
{
strArr.Append("arrList[");
strArr.Append(intIndex.ToString());
strArr.Append("]=\"");
strArr.Append(" "+row["CName"].ToString()+" "); //产品名
strArr.Append(row["Standard"].ToString() + " ");//规格
strArr.Append( row["MCode"].ToString() + " ");//编号
strArr.Append(row["Unit"].ToString() + "\"; ");//单位
intIndex++;
}
strArr.Append("</script>");
Response.Write(strArr.ToString());
}
public DataTable FillDataTable(string sqlstr)
{
SqlConnection con = new SqlConnection("server=.;database=Northwind;uid=sa;pwd=123456;"); //修改用户名和密码
con.Open();
SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = new SqlCommand(sqlstr,con);
DataSet ds = new DataSet();
sda.Fill(ds);
con.Close();
return ds.Tables[0];
}
这是我目前的解决方法,请各位高手多加指点,探讨,本人QQ:355700457
rliverpool
2008-09-07
打赏
举报
回复
没人回答,自己顶下,本人的实现方法
<html>
<head>
<title></title>
<script type="text/javascript">
var intIndex = 0;
var a_selectedIndex = - 1;
arrList = new Array();
arrList[intIndex ++ ] = "1sdfsdf.com";
arrList[intIndex ++ ] = " 产品 ";
arrList[intIndex ++ ] = " b22dsafsdf";
arrList[intIndex ++ ] = " c333asdfsadf";
arrList[intIndex ++ ] = " 4444dsafasdf";
arrList[intIndex ++ ] = " dddsfddsafdsaf";
//确定位置
function getAbsoluteHeight(ob)
{
return ob.offsetHeight
}
function getAbsoluteWidth(ob)
{
return ob.offsetWidth
}
function getAbsoluteLeft(ob)
{
var s_el = 0;
el = ob;
while(el)
{
s_el = s_el + el.offsetLeft;
el = el.offsetParent;
}
return s_el
}
function getAbsoluteTop(ob)
{
var s_el = 0;
el = ob;
while(el)
{
s_el = s_el + el.offsetTop ;
el = el.offsetParent;
}
return s_el
}
function divPosition(objouter, objInput)
{
objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);
objouter.style.left = getAbsoluteLeft(objInput);
objouter.style.width="300px";
}
//增加节点
function addOption(value, keyw,objouter,objInputId)
{
var v = value;//alert(v);
objouter.innerHTML += "<div onmouseover=\"this.className = 'sman_selectedStyle'\" onmouseout=\"this.className = ''\" onmousedown=\"var objInput=document.getElementById('"+objInputId+"');var str = this.innerText;dealResult(objInput,str);document.getElementById('Ignore').focus();\">" + v + "</div>";
}
//选择节点
function chageSelection(isUp, objouter)
{
if (objouter.style.display == 'none')
{
objouter.style.display = '';
}
if(a_selectedIndex == - 1 || a_selectedIndex == 0)
{
a_selectedIndex = 1;
}
else
{
if (isUp)
a_selectedIndex ++ ;
else
a_selectedIndex -- ;
}
var maxIndex = objouter.children.length - 1;
if (a_selectedIndex < 1)
{
a_selectedIndex = 1;
}
if (a_selectedIndex > maxIndex-1)
{
a_selectedIndex = maxIndex-1;
}
for (intTmp = 0; intTmp <= maxIndex; intTmp ++ )
{
if (intTmp == a_selectedIndex)
{
objouter.children[intTmp].className = "sman_selectedStyle";
}
else
{
objouter.children[intTmp].className = "";
}
}
}
//按下回车
function outSelection(Index, objInput, objouter)
{
var maxIndex = objouter.children.length - 1;
for (intTmp = 1; intTmp <= maxIndex; intTmp ++ )
{
if ( objouter.children[intTmp].className == "sman_selectedStyle")
{
a_selectedIndex = intTmp;
}
}
var Str = objouter.children[a_selectedIndex].innerText;
dealResult(objInput,Str);
objouter.style.display = 'none';
a_selectedIndex = - 1;
}
//查找和显示
function checkAndShow(objouter, objInput)
{
var strInput = objInput.value;
var dispNum = 10;
if (strInput != "")
{
divPosition(objouter, objInput);
a_selectedIndex = 1;
objouter.innerHTML = "<div style='background:#E8F7EB;'>品名 规格 商品编号 单位</div> ";
for (intTmp = 0; intTmp < arrList.length; intTmp ++ )
{
if(arrList[intTmp].indexOf(strInput) > 0 && dispNum > 0)
{
addOption(arrList[intTmp], strInput, objouter, objInput.id);
dispNum -- ;
}
}
objouter.innerHTML += "<div style='float:right;'><a href='#'onclick=\"document.getElementById('__smanDisp').style.display = 'none'\">关闭</a></div>"
objouter.style.display = 'block';
}
else
{
objouter.style.display = 'none';
}
}
//监视按钮
function propertyChange()
{
if (event.propertyName == "value")
{
arrList.sort(function(a, b)
{
if(a.length > b.length)return 1;
else if(a.length == b.length)return a.localeCompare(b);
else return - 1;
}
)// 括号
var objInputId = event.srcElement.id;
var objouter = document.getElementById('__smanDisp');
var objInput = document.getElementById(objInputId);
// 文本框对象
var ie = (document.all) ? true : false
if (ie)
{
checkAndShow(objouter, objInput)
}
else
{
checkAndShow(objouter, objInput)
}
divPosition(objouter, objInput);
}
}
//输入框失去焦点
function noDisp()
{
document.getElementById('__smanDisp').style.display = "none";
// a_selectedIndex = - 1
}
function checkKeyCode()
{
arrList.sort(function(a, b)
{
if(a.length > b.length)return 1;
else if(a.length == b.length)return a.localeCompare(b);
else return - 1;
}
)// 括号
var objInputId = event.srcElement.id;
var objouter = document.getElementById('__smanDisp');
// 显示的DIV对象
// alert(objouter);
var objInput = document.getElementById(objInputId);
// 文本框对象
var ie = (document.all) ? true : false
if (ie)
{
var keyCode = event.keyCode
if (keyCode == 40 || keyCode == 38)
{
// 下上
var isUp = false
if(keyCode == 40) isUp = true ;
chageSelection(isUp, objouter)
}
else if (keyCode == 13)
{
// 回车
outSelection(a_selectedIndex, objInput, objouter);
}
else
{
checkAndShow(objouter, objInput)
}
}
else
{
checkAndShow(objouter, objInput)
}
divPosition(objouter, objInput);
}
//处理函数
function dealResult(objInput, str)
{
var arr = str.split(" ");
var tr = objInput.parentNode.parentNode;
for(i = 0; i < arr.length; i ++ )
{
tr.cells[i].childNodes[0].value = arr[i];
}
}
</script>
<style>
.Disp
{
background : #E8F7EB;
border : 1px solid #CCCCCC;
font - size : 14px;
cursor : default;
position : absolute;
display : none;
}
.sman_selectedStyle
{
background - Color : #102681;
color : #FFFFFF
}
</style>
</head>
<body>
<div id="__smanDisp" class="Disp"></div>
<input type="text" id="Ignore" style="display:none;"/>
<table><tr><td>
<input type="text" id="text1" value="text1" onblur="noDisp();" onkeyup="checkKeyCode();" onpropertychange="propertyChange();" /></td>
<td>
<input type="text" id="text2" />
</td>
<td>
<input type="text" id="text3" />
</td>
<td>
<input type="text" id="text4" />
</td>
</tr></table>
</body>
</html>
google
suggest
实现
ajax应用
asp.net & ajax
实现
google
suggest
AJAX
实现
仿
Google
Suggest
搜索
提示
效果
用AJAX
实现
类似
GOOGLE
搜索框的功能
仿
Google
Suggest
提示
效果
NULL 博文链接:https://forever-xb-hotmail-com.iteye.com/blog/670313
suggest
仿
google
提示
仿
google
提示
,有延时1秒或几秒,由自己控制
类似
google
suggest
的搜索
提示
框
csdn中最近又好几个兄弟提这个问题,偶在这里把它贴出来了 需要的下拉
该打包程序运行在vs2005下,只需要简单改一下web.config中数据库链接即可运行。
Ajax
52,792
社区成员
25,335
社区内容
发帖
与我相关
我的任务
Ajax
Web 开发 Ajax
复制链接
扫一扫
分享
社区描述
Web 开发 Ajax
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章