jQuery Ajax实现简单的搜索框提示功能

html：

css代码：

body{
	background-color: #660099;
}
form{
	float: left;
	background-color: #fff;
	position: relative;
	left: 10px;
	top: 10px;
}
.search_input{
	border: none;
	height: 25px;
	line-height: 25px;
	outline: none;
	width: 350px;
	vertical-align:bottom;
}

.ss{
	position: absolute;
	top: 200px;
	left: 300px;
}

.suggest{
	border-top: 0;
	width: 384px;
	background-color: #fff;
	display: none;
}
.suggest ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.suggest ul li{
	padding: 3px;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
	cursor: pointer;
}
.suggest ul li:hover{
	background-color: #E0E0E0;
}

javascript代码：

$(function(){
    $("#search_input").bind('keyup',function(){
            //$.ajax()远程获取json数据
	        $.ajax({
		    type: "POST",
		    url: "search.php",
		    //dataType: 'json',
		    data: {
		    	queryString: $("#search_input").val()
		    },
		    success: function(response,status,xhr){
                //处理返回的数据
               // var text = json_encode(response);
		    	arr=response.split(",");
		    	 var html="";
                for(var i=0;i'; 
				} 	
				$('#search_result').html(html);

				//显示返回的数据
				 $('#search_suggest').show().css({
                    position: 'absolute',
                    top: $('#search_form').offset().top + $('#search_input').height(),
                    left: $('#search_form').offset().left,
                    width: $('#search_input').width()
               });
		    	//alert(arr[]);
		    	//alert(response.length);
			    //suggest(response);
			},
			beforeSend: function(){
				console.log("即将发送ajax请求");
			},
			error: function(xhr,errorText,errorType){
				console.log(errorType+":"+errorType);
			}
		});	
			
			/*
               	$(document).bind('click',function(){
		$('#search_suggest').hide();
		});
               */
		});       

		

});

php代码：