![基于jquery框架的ajax搜索显示]( "基于jquery框架的ajax搜索显示")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>search_project.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery/jquery-1.4.2.js">
</script>
<script>
// $.ajax({
// url:"../Servlet_demo1",
// type:"POST",
// data:data,
// success:function(backData){
// var p = eval("("+backData+")");
// alert(p);
// alert(p.a);
// alert(p.b[1]);
//
// }
// })
// $.getjson
// alert
// (console.info(data));
// alert(data.);
// $("#button1").click(function(){
// var data = $("#form1").serializeArray();
// });
</script>
<style>
#searchText {
font-size: 25px;
width: 500px
} #searchbutton {
font-size: 25px;
width: 100px
} #div2 {
text-align: center;;
} .ultext {
border: 2px solid grey;
margin-left: 650px;
width: 500px;
display: none;
} .ultext li {
list-style: none;
padding:2px;
margin-left: 0px;
}
.keyData {
background: grey;
color: white;
}
</style>
<script>
// var sendData =""
$(function(){
$("#searchText").focus();
// 失去焦点了不显示
//增添鼠标移上去的事件
;
$("#searchText").keyup(function(){
//设置不显示
$(".ultext").hide();
//删除上次的所有资源速
$(".ultext").empty();
//监听输入框是否落入，ajax远程发送请求
var text = $(this).val();
// alert($text);
//若有值则发送请求
if (text) {
$.post("../Servlet_demo1", {
keyWord: text
}, function(data){
//服务器返回的data
// alert(data);
var data2 = eval("(" + data + ")");
for (var a = 0; a < data2.length; a++) {
// alert(data2[a]);
$(".ultext").append("<li>" + data2[a] + "</li>");
}
// $(".ultext>span").wrap("<li></li>");
$(".ultext>li").mouseover(function(){
// alert("iojio");
$(".ultext>li").removeClass("keyData");
$(this).addClass("keyData");
})
$(".ultext>li").click(function(){
// alert($(this).text());
$("#searchText").val($(this).text()) ;
})
$(".ultext>li").mouseout(function(){
// alert("iojio");
// $(".ultext>li").removeClass("keyData");
$(this).removeClass("keyData");
})
})
$(".ultext").show();
}
else {
$(".ultext").hide();
}
// $(".ultext").append("<span class='spanhaha'>"+data2[a]+"</span></br>");
});
/*
* 当失去焦点时先回调此函数，此函数执行完才会执行ajax的li监听点击事件
*
*/
$("#searchText").blur(function(){
//判断是否鼠标放在了某个li上面？
if($(".ultext>li").hasClass("keyData")) {
//若有则把选中的内容打印到text中去
$(this).val($(".ultext>li[class=keyData]").text());
}
// setTimeout(alert("ijh"),1000);
//若没有 ， 说明鼠标点到了别的地方
//所以关闭div下拉
$(".ultext").hide();
$(".ultext").empty();
});
});
</script>
</head>
<body>
<div id = "div2" align="center">
<form id="form2" class = "form2">
<span><input type="text" id = "searchText"><input type="button" id="searchbutton"></span>
<div align="left" class="ultext">
</div>
</form>
</div>
</body>
</html>
