仿百度google搜索提示在opera下的实现
效果图如下:

前端实现代码如下:

hello2.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file=
"/common/getContextPath.jsp"%>
<script type=
"text/javascript" src="js/prototype.js"></script>
<script type=
"text/javascript" src="js/ajax.js"></script>

<style type=
"text/css">
.list {
float:left;
width:100%;
}
</style>

<body>
<input type=
"text" id="itext" size="50" /><input type="submit" value="搜索"/>
<div id=
"outdiv"
style=
"display: none; width: 200px; height: auto; position: absolute; left: 16px; top: 41px;">
111
</div>
</body>

<script type=
"text/javascript">
var request = getHTTPObject();

//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
if(/msie/i.test(navigator.userAgent))    
//ie浏览器
{
document.getElementById('itext').onpropertychange=dealFun
}
else
{
//非ie浏览器,比如Firefox
document.getElementById('itext').addEventListener(
"input",dealFun,false);
}
  
//键盘抬起时激活的函数
document.onkeyup  =  dealFun;


function  dealFun(e){
    e   =   window.event   ||   e;
    
    if(e){
    if(e.keyCode==38){
        return;
    }else if(e.keyCode==40){
     return;
    }
  
// alert(e.keyCode);
    }
    
    var inputvalue=$(
"itext").value;
    if(inputvalue ==''||inputvalue==null){
     Element.hide(
"outdiv");
     return;
    }
    var url=
"${basePath}/search/searchSuggest.action?keyword="+encodeURIComponent(inputvalue);
    
//获取用户当前输入的内容
    
request.open(
"GET", url, true);
    request.onreadystatechange = show;
    
    request.send(null);
}


function show(){
   if (request.readyState == 4) {
      if (request.status == 200) {
        Element.show(
"outdiv");
        var response = request.responseText;
        var json =eval('('+response+')')
//这句最重要,上面可以忽略
        
        var temp =
"";
    var outdiv = $(
"outdiv");
    for(var i = 0;i < json['data'].length;i++){
        temp = temp +
"<div class='list' style='background-color: #ECEDFF;'  onMouseOver=this.style.backgroundColor='#dddddd' onMouseOut=this.style.backgroundColor='#ECEDFF'   onclick='inMessage(this)'>" +json['data']<i>['word']+ "</div>" +"<br>";
    }
    outdiv.innerHTML = temp;

      }
    }
}

function inMessage(obj){
    $(itext).value = obj.innerHTML;
    Element.hide(
"outdiv");
}

function selectMessage(obj){
    $(itext).value = obj.innerHTML;
}


var   currentLine   =   -1;
document.onkeydown   =   function   (e)    
{
    e   =   window.event   ||   e;
    switch   (e.keyCode)    
    {
        case   38:
            currentLine--;
            changeItem();
            break;
        case   40:
            currentLine++;
            changeItem();
            break;
        default   :
            break;
    }
}

//改变选择项目
function   changeItem()
{
    this.$$ = function(o, str){ return o.getElementsByTagName(str);}
    var   it   =   document.getElementById(
"outdiv");
    var divs = this.$$(it, 'div');
    var len = divs.length;
    for   (i=0;i<len;i++)    
    {
        divs<i>.style.backgroundColor =
"#ECEDFF";
    }
    if   (currentLine   <   0)
        currentLine   =   len   -   1;
    if   (currentLine   ==   len)
        currentLine   =   0;
        
   if(currentLine>0){
     divs[currentLine].style.backgroundColor =
"#dddddd";
     selectMessage(divs[currentLine]);
   }
  
}

</script>


ajax.js

function getHTTPObject() {
var request = false;
try {
request = new XMLHttpRequest();
}
catch (trymicrosoft) {
try {
request = new ActiveXObject(
"Msxml2.XMLHTTP");
}
catch (othermicrosoft) {
try {
request = new ActiveXObject(
"Microsoft.XMLHTTP");
}
catch (failed) {
request = false;
}
}
}
return request;
}


lunzi   2010-10-11 17:42:34 评论:0   阅读:1307   引用:0

发表评论>>

署名发表(评论可管理,不必输入下面的姓名)

姓名:

主题:

内容: 最少15个,最长1000个字符

验证码: (如不清楚,请刷新)

Copyright@2004-2010 powered by YuLog