像baidu那种在文本框中输入内容后,会自动检索相应内容的效果怎么实现? http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx参考下这篇文章 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 这是个简单的演示,输入"张"或"C"时有提示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"> html, body{ font-size:12px; color:#333333; font-family:"宋体"; } .tb{ border:1px solid #CCCCCC; background:#F8F8F8; border-collapse:collapse; } .tb td{ border:1px solid #CCCCCC; } .tr{ background:#EEEEEE; font-weight:bold; } #divResult{ border:1px solid #006699; } #tbResult{ border:0px; } #tbResult td{ border:0px; } #tbResult tr{ line-height:22px; } .td1{ color:#111111; text-align:left; padding-left:5px; } .td2{ color:#008000; text-align:right; padding-right:5px; }</style></head><body><script type="text/javascript"> var data = ["张三", "李四", "CSDN", "CCTV", "张五"]; var d, kw, oResult, oInput, currentRow; function $(id){ return document.getElementById(id); } function getOffset(obj){ var x = 0, y = 0; do{ x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; }while(obj); return {x:x, y:y}; } function initPosition(){ oResult = $("divResult"); oInput = $("txtKeyword"); //设置位置和大小 var point = getOffset(oInput); oResult.style.left = point.x + "px"; oResult.style.top = point.y + oInput.offsetHeight + "px"; oResult.style.width = oInput.offsetWidth - 3 + "px"; } function hideResult(){ oResult.style.display = "none"; } function mover(row){ //去掉当前行高亮 if(currentRow > 0){ var oRow = $("tbResult").rows[currentRow-1]; mout(oRow); } row.style.backgroundColor = "#3366CC"; row.cells[0].style.color = "#ffffff"; } function mout(row){ row.style.backgroundColor = "#ffffff"; row.cells[0].style.color = "#111111"; } function mclick(row){ oInput.value = row.cells[0].innerHTML; hideResult(); } function moveRow(dir){ //去掉当前行高亮 if(currentRow > 0){ var oRow = $("tbResult").rows[currentRow-1]; mout(oRow); } if(dir == "UP"){ currentRow--; if(currentRow < 0){ currentRow = d.data.length; } }else{ currentRow++; if(currentRow > d.data.length){ currentRow = 0; } } //还原关键词 if(currentRow == 0){ oInput.value = kw; }else{ //设置高亮 var oRow = $("tbResult").rows[currentRow-1]; mover(oRow); oInput.value = oRow.cells[0].innerHTML; } } function Search(){ var val = $("txtKeyword").value; oResult = $("divResult"); if(val == "") { hideResult(); return; } oResult.style.display = ""; //添加数据 var html = [], len = 0; html.push("<table width='100%' cellpadding='0' cellspacing='0' border='0' id='tbResult'>"); for(var i=0; i<data.length; i++){ if(data[i].indexOf(val) >= 0){ html.push("<tr onmouseover='mover(this)' onmouseout='mout(this)' onclick='mclick(this)'><td class='td1'>" + data[i] + "</td></tr>"); len ++; } } html.push("</table>"); oResult.style.height = len * 22 + "px"; oResult.innerHTML = html.join(""); } window.onload = function(){ initPosition(); }</script><input type="text" id="txtKeyword" name="txtKeyword" onkeyup="Search()" /><div id="divResult" style="display:none"></div></body></html> 提示框。。用ajax获取 用DIV输出 参考仿google_suggest:http://hansir.cn/blog/2008/20080616-27.html 谢谢,基本已经可以实现我的需求,但是我还想问一下:如果在我所要搜索的内容中有相同的内容,我想将备注中的内容也显示出来,可是在search.asp页面中我添加了了那个栏位的内容,可还是无法显示?请给菜鸟指点一下,谢谢 那你就在SQL语句里改呗sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc" sql语句已经更改了应该是在xml文件里更改 需要现实的记录,可是也改了,不知道具体的怎么做请高手指点 box2d 中如何获取物体坐标 一个很精致(个人是这么认为的,尽管没有界面)的JavaScript贪吃蛇游戏 rar 文件下载为什么在IE中直接打开了 当浏览器窗口改变时,如何控制frame的大小 关于getElementById方法 为什么插入img的时候总是自动插最前面? javascript的下拉列的不显示的问题 新手求助js一菜单显示问题... 跪求简单的一段Javascript代码,一定给分 在线急等! 在线编辑器难题:如何只让设置字体颜色,禁止使用其它如链接、图片等? window.open打开窗口的问题 怎么办?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size:12px;
color:#333333;
font-family:"宋体";
}
.tb{
border:1px solid #CCCCCC;
background:#F8F8F8;
border-collapse:collapse;
}
.tb td{
border:1px solid #CCCCCC;
}
.tr{
background:#EEEEEE;
font-weight:bold;
}
#divResult{
border:1px solid #006699;
}
#tbResult{
border:0px;
}
#tbResult td{
border:0px;
}
#tbResult tr{
line-height:22px;
}
.td1{
color:#111111;
text-align:left;
padding-left:5px;
}
.td2{
color:#008000;
text-align:right;
padding-right:5px;
}
</style>
</head><body>
<script type="text/javascript">
var data = ["张三", "李四", "CSDN", "CCTV", "张五"];
var d, kw, oResult, oInput, currentRow;
function $(id){
return document.getElementById(id);
}
function getOffset(obj){
var x = 0, y = 0;
do{
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}while(obj);
return {x:x, y:y};
}
function initPosition(){
oResult = $("divResult");
oInput = $("txtKeyword");
//设置位置和大小
var point = getOffset(oInput);
oResult.style.left = point.x + "px";
oResult.style.top = point.y + oInput.offsetHeight + "px";
oResult.style.width = oInput.offsetWidth - 3 + "px";
}
function hideResult(){
oResult.style.display = "none";
}
function mover(row){
//去掉当前行高亮
if(currentRow > 0){
var oRow = $("tbResult").rows[currentRow-1];
mout(oRow);
}
row.style.backgroundColor = "#3366CC";
row.cells[0].style.color = "#ffffff";
}
function mout(row){
row.style.backgroundColor = "#ffffff";
row.cells[0].style.color = "#111111";
}
function mclick(row){
oInput.value = row.cells[0].innerHTML;
hideResult();
}
function moveRow(dir){
//去掉当前行高亮
if(currentRow > 0){
var oRow = $("tbResult").rows[currentRow-1];
mout(oRow);
}
if(dir == "UP"){
currentRow--;
if(currentRow < 0){
currentRow = d.data.length;
}
}else{
currentRow++;
if(currentRow > d.data.length){
currentRow = 0;
}
}
//还原关键词
if(currentRow == 0){
oInput.value = kw;
}else{
//设置高亮
var oRow = $("tbResult").rows[currentRow-1];
mover(oRow);
oInput.value = oRow.cells[0].innerHTML;
}
}
function Search(){
var val = $("txtKeyword").value;
oResult = $("divResult");
if(val == "") {
hideResult();
return;
}
oResult.style.display = "";
//添加数据
var html = [], len = 0;
html.push("<table width='100%' cellpadding='0' cellspacing='0' border='0' id='tbResult'>");
for(var i=0; i<data.length; i++){
if(data[i].indexOf(val) >= 0){
html.push("<tr onmouseover='mover(this)' onmouseout='mout(this)' onclick='mclick(this)'><td class='td1'>" + data[i] + "</td></tr>");
len ++;
}
}
html.push("</table>");
oResult.style.height = len * 22 + "px";
oResult.innerHTML = html.join("");
}
window.onload = function(){
initPosition();
}
</script>
<input type="text" id="txtKeyword" name="txtKeyword" onkeyup="Search()" />
<div id="divResult" style="display:none">
</div>
</body>
</html>
用ajax获取 用DIV输出
仿google_suggest:http://hansir.cn/blog/2008/20080616-27.html
如果在我所要搜索的内容中有相同的内容,我想将备注中的内容也显示出来,可是在search.asp页面中我添加了了那个栏位的内容,可还是无法显示?请给菜鸟指点一下,谢谢
应该是在xml文件里更改 需要现实的记录,可是也改了,不知道具体的怎么做
请高手指点