社区
Ajax
帖子详情
如何实现 Google 的输入前提示, 即Google Suggest
rliverpool
2008-09-06 10:57:34
如何实现 Google 的输入前提示, 即Google Suggest
...全文
246
10
打赏
收藏
如何实现 Google 的输入前提示, 即Google Suggest
如何实现 Google 的输入前提示, 即Google Suggest
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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>
ajax
实现
输入
提示
(类似百度和
Google
的
输入
提示
)
ajax
实现
输入
提示
(类似百度和
Google
的
输入
提示
) 用法非常简单: 1、在jsp页面引入auto
suggest
.js文件 2、建一个text文本框 3、写js代码: <script> new actb("tb", loadAllMessage("
suggest
" , ""), null);
Ajax无刷新和
Google
Suggest
VS2005 用Ajax
实现
无刷新技术和
输入
前
提示
!即:
Google
Suggest
ajax自动完成 搜索
提示
(类似
google
)
suggest
该脚本功能很强大,类似
google
的自动完成。 使用了cache 功能,当敲入的字符数可以在cache中查到时,将不会向服务器发送请求。减轻服务器压力 使用空格匹配,一个空格字符相当于1个或多个字符(串),可以自己写简单的正则,加入属性,默认的spaceMatchRg为"\.\{1,}" 无论
输入
字符串在dataSource的何处,始终匹配 当数据量较大时,自动截取
前
部分的数据,提高效率 忽略大小写 开启方向键(小键盘)
基于Ajax的
Google
Suggest
开发
Google
公司推出的
Google
suggest
服务可
实现
简单的搜索功能,当在搜索框中
输入
要搜索的词时,
Google
会给出一些相关搜索词的
提示
,然后可以通过光标移动来定位,同时还会统计相应结果的数量,这便是通过Ajax
实现
的。使用Ajax技术,
Google
suggest
可以根据用户的
输入
及时和服务器端进行交互然后产生一些
提示
信息,以展示给用户。
飞飞模仿
google
(
suggest
)下拉
提示
框sggestV1.5
此小程序是模仿
Google
(sgguest)
输入
提示
框所编写 亦可用于用户注册邮箱时的
提示
此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明: 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离 4.支持下拉框按钮 5.支持显示结果数量 6.可以一个页面多次使用 7.模拟下拉框不会被select遮挡 8.调用更方便(内核已改为jq插件) 9.皮肤修改方便 ,外置的css样式文件,带有注释说明,任意修改 文件使用说明: 在需要使用的页面首先要引用2个js文件 <script src="jquery1.2.6.min.js">suggest.js">前 调用函数 **以下是调用示例**: $("#test2").
suggest
Show("aa","search.asp","ddd",2,1,1,"search.asp") 函数介绍: test2 必填 需要添加该插件的对象的父Id "aa": 必填 为需要
输入
信息的input的name search.asp 必填 即为远程页面(数据获取,信息处理页面) ddd 非必填 为"aa"的默认值 2 非必填 z-index isScroll 非必填 下拉框是否有滚动条[1有,0没有,默认0] arrow 非必填 否显示下拉框按钮[1是,0不是,默认0] arrowUrl 非必填 点击下拉框按钮时 执行的远程页面 ************************************************************************ search.asp页面介绍: 该页面返回数据必须是xml格式,输出数据数据必须符合以下格式
显示信息
属性介绍: 1.value aa的value值,可以不填。飞飞~Asp技术乐园不填value值则取"显示信息" 2.result 显示远程获取的统计结果 3.显示信息 即aa的显示值text值 ************************************************************************ 调用实例: 可以参考 index.asp
Ajax
52,797
社区成员
25,306
社区内容
发帖
与我相关
我的任务
Ajax
Web 开发 Ajax
复制链接
扫一扫
分享
社区描述
Web 开发 Ajax
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章