52,792
社区成员
发帖
与我相关
我的任务
分享如何实现 Google 的输入前提示， 即Google Suggest
如何实现 Google 的输入前提示， 即Google Suggest
...全文
请发表友善的回复…
发表回复
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
征服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
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>
<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>
