像baidu那种在文本框中输入内容后，会自动检索相应内容的效果怎么实现？

看了baidu中搜索的效果，我想应该是将相应的数据用层输出的，不知道对不对，请高手给菜鸟指点一下，非常感谢!

9 个解决方案

#1

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

参考下这篇文章

#2

这是个简单的演示,输入"张"或"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>

#3

提示框。。
用ajax获取用DIV输出

#4

参考
仿google_suggest：http://hansir.cn/blog/2008/20080616-27.html

#5

引用 1 楼 sy_binbin 的回复:

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

参考下这篇文章

谢谢，基本已经可以实现我的需求，但是我还想问一下：
如果在我所要搜索的内容中有相同的内容，我想将备注中的内容也显示出来，可是在search.asp页面中我添加了了那个栏位的内容，可还是无法显示？请给菜鸟指点一下，谢谢

#6

那你就在SQL语句里改呗

sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc"

#7

引用 6 楼 sy_binbin 的回复:

那你就在SQL语句里改呗

sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc"

sql语句已经更改了
应该是在xml文件里更改需要现实的记录，可是也改了，不知道具体的怎么做
请高手指点

#8

楼上是高手啊，不错我喜欢啊，

#9

呵呵，多谢大家的建议，结贴了！

#1

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

参考下这篇文章

#2

这是个简单的演示,输入"张"或"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>

#3

提示框。。
用ajax获取用DIV输出

#4

参考
仿google_suggest：http://hansir.cn/blog/2008/20080616-27.html

#5

引用 1 楼 sy_binbin 的回复:

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

参考下这篇文章

#6

那你就在SQL语句里改呗

sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc"

#7

引用 6 楼 sy_binbin 的回复:

那你就在SQL语句里改呗

sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc"

sql语句已经更改了
应该是在xml文件里更改需要现实的记录，可是也改了，不知道具体的怎么做
请高手指点

#8

楼上是高手啊，不错我喜欢啊，

#9

呵呵，多谢大家的建议，结贴了！

秒客网

像baidu那种在文本框中输入内容后，会自动检索相应内容的效果怎么实现？

9 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#1

#2

#3

#4

#5

#6

#7

#8

#9

相关文章