通过 ajax 仿照百度搜索功能[实例]

<script>
		
	var bind_name = 'input';//修改input框value数值，发生变化的时候，触发的事件，针对w3c标准浏览器
	if (navigator.userAgent.indexOf("MSIE") != -1){//IE的 属性 非常重要
		bind_name = 'propertychange';
	}
	var current_index = -1;
	var timer;
	$('#searchId').bind(bind_name,function(){
			if(timer != null){
				clearTimeout(timer);
			}
			timer = setTimeout(
				function(){
					$.ajax({
					   type: "POST",
					   url: "./ajax.action",
					   data: "",
					   timeout: 1000,
					   dataType : "html",
					   beforeSend:function(){$("#search_btn").addClass('loading');},
					   success: function(msg){
					   		$("#search_btn").removeClass('loading');
					   	
					   		$('#showInfo').css('display','block');
							$('#showInfo').css('top',top);	
					   		
						  	$('.showInfo').html(msg);
						  	// $('#showInfo table tr td ul li').hover(function(){
							//	$(this).css('background-color','red').siblings().css('background-color','');
							// })
							current_index = -1;
							 $('#showInfo table tr td ul li').hover(function(){
								$(this).css('background-color','red');
							 },function(){
							 	$(this).css('background-color','');}
							 );
					   },
					   error: function(){
				      			alert('error');
				  	   }
					}); 
				   },
				500
			);
	});
	
	//用户按下键盘键
	$('#searchId').keydown(function(e){
		switch(e.keyCode){
			case 27://esc 
				$('#showInfo').css('display','none');
			break;
			
			case 13://enter
				if(current_index >=  0){
					var currentObj =  $($('#showInfo table tr td ul li.result')[current_index]);//取得链接的href
					var url = currentObj.find('a').attr('href');
					window.loaction.href = url;
					return true;
				}else{
					return false;
				}
				
			break;
			case 40://向下 下标递增
			
				var result_count = $('#showInfo table tr td ul li.result').size();
				if(current_index >= result_count-1){ 
					current_index=-1;
				}	
	           
	            $($('#showInfo table tr td ul li.result')[++current_index]).mouseover().siblings().mouseout();
				
			break;
			case 38://向上 下标递减 
				var result_count = $('#showInfo table tr td ul li.result').size();
				if(current_index <= 0){ 
					current_index=result_count;
				}	
	           
	            $($('#showInfo table tr td ul li.result')[--current_index]).mouseover().siblings().mouseout();
			break;
			
			
		}	
		
	
	
	})
	

</script>

<form>
            <input type="text" id="searchId" />
            <input type="submit" id="search_btn" value="" />
        </form>
        <div style="width:300px;height:500px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo" class="showInfo">
            
        </div>

public String ajax(){
        HttpServletResponse reponse = ServletActionContext.getResponse();
        try {
        //    String str = "{\"username\" : \"andy\",\"age\":23}"; jsonstr
        //    String str = "[{\"username\" : \"andy\",\"age\":23},{\"username\" : \"jack\",\"age\":32}]"; //jsonarray
            String html = "<table><tbody>" + "<th>SONG </th>" + "<tr><td><ul>"
                    + "<li class=\"result\"><a href=\"www.baidu.com\">" + "BEAN JINE"
                    + "<li class=\"result\"><a href=\"www.dangerous.com\">" + "dangerous"
                    + "<li class=\"result\"><a href=\"www.dangerous1.com\">" + "dangerous1"
                    + "<li class=\"result\"><a href=\"www.dangerous2.com\">" + "dangerous2"
                    + "<li class=\"result\"><a href=\"www.dangerous3.com\">" + "dangerous3"
                    + "<li class=\"result\"><a href=\"www.dangerous4.com\">" + "dangerous4"
                    + "<li class=\"result\"><a href=\"www.dangerous5.com\">" + "dangerous5"
                    + "<li class=\"result\"><a href=\"www.dangerous6.com\">" + "dangerous6"
                    + "</a></ul><td></tr>" + "<tbody></table>";    
            reponse
                    .getWriter()
                    .print(html);
            reponse.getWriter().flush();
            
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return null;
    }