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);
}
});
});
});
php代碼：