如何用JavaScript实现根据输入显示结果

异步可以取出来，我目前用.NET+JQUERY取的时候比较方便，列表可以用DIV来实现，选择的时候只需要将颜色改变即可。

解决方案 »

  1.   

    只用JavaScript能不能实现？效果类似GOOGLE输入时下拉列表显示的效果，只不过所有的数据之前已经从数据库中查询出来了。
      

  2.   

    本人只是一个JavaScript初学者。
      

  3.   

    这是个简单的例子...
    <!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">
    #tbResult{
    border:1px solid #CCC; line-height:22px;
    }
    </style>
    </head><body>
    <script type="text/javascript">
    var data = ["张三", "李四", "CSDN", "CCTV", "张五"];

    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(){
    var oResult = $("divResult");
    var 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 Search(){
    var val = $("txtKeyword").value;
    var oResult = $("divResult");

    if(val == "") {
    oResult.style.display = "none";
    oResult.innerHTML = "";
    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><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>
      

  4.   


    这个完整点
    <!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>