类似于百度搜索

来源：互联网发布：李维嘉暴瘦知乎编辑：程序博客网时间：2024/05/16 12:36

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>divshow</title>
<style type="text/css">
body{text-align:center;}
#divResult{display:none;background-color:white;z-index:1000;position:absolute;border:1px solid lightgray;cursor:pointer;}
ul{width:100%;margin:0px;}
ul li{list-style:none; width:100%;padding:auto 0px;margin:0px;text-align:left;}

</style>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
//初始化div的位置
$(function(){
     var oInput = $("#txtKeyword");
  var pointX = oInput.offset().left;
  var pointY = oInput.offset().top;
  var width = oInput.width();
  var height = oInput.height();

$("#divResult").css({"top":pointY+height+4+"px","left":pointX+"px","width":width+6+"px"});
})

var data = ["张三", "李四", "CSDN", "CCTV", "张五"];
function Search(){
$("#divResult").css({"display":"none"});
$("#divResult").html("");//清空div

        var val = $("#txtKeyword").val();
  if(val == "") {
            return;
        }
        //添加数据
        var strUl = "<ul>";

        for(var i=0; i < data.length; i++){
   if(data[i].indexOf(val) >= 0){
    strUl += "<li onmouseover='mover(this)' onmouseout='mout(this)' onclick='mclick(this)'>" + data[i] + "</li>";
   }
        }

  /*jQuery.ajax({
    url: 'xml/meetingTitle_ajax_xml.jsp?keyword='+keyword,
    type: 'post',
    dataType: 'text',
    contentType: 'application/json; charset=GBK',
    success: function (data) {
     var strs = new Array(); //定义一数组
        strs = data.split(","); //字符分割----得到数据
     for(var i=0; i < strs.length; i++){
      strUl += "<li onmouseover='mover(this)' onmouseout='mout(this)' onclick='mclick(this)'>" + strs[i] + "</li>";
     }
    }
  });*/

  strUl += "</ul>";
  if(strUl != "<ul></ul>"){
   $("#divResult").html(strUl);
      $("#divResult").css({"display":"block"});
  }
    }

//改变背景色、点击事件
function mover(obj){
        $(obj).css({"background-color":"lightgray"});
    }
    function mout(obj){
  $(obj).css({"background-color":"white"});
    }
    function mclick(obj){
  $("#txtKeyword").val($(obj).html());
        $("#divResult").css({"display":"none"});
    }
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<div>百度一下你就知道<div>
<br>

--要引用jquery