ajax实现搜素框功能,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'+arr[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代码：