AJAX联想查询的例子
//通过输入值的不断改变而改变（按键事件）提示内容的功能，然后可以选着你想要的内容填充进来。
html主要代码:test1.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
.inListOut {
background-color: white;
text-align: left;
text-indent: 1em;
cursor: pointer;
margin: 0;
padding: 0;
height: 25px;
line-height: 25px;
width: 280px;
font-size: 12px;
}
.inListMove {
background-color: #eee;
text-align: left;
text-indent: 1em;
cursor: pointer;
margin: 0;
padding: 0;
height: 25px;
line-height: 25px;
width: 280px;
font-size: 12px;
}
</style>
<body id="mainbody">
出发机场：<input type="text" id="departureAirfield1" name="departureAirfield" onfocus="showTheList('departureAirfield1')" onKeyUp="showTheList('departureAirfield1')" onblur="removeTheList()" placeholder="机场名/三字码" class="form-control input-sm pull-left" style="width: 155px;">
<div id="hhh" position:absolute; z-index: 999; top: 0px; left: 0px;"></div>
</body>
</html>
<script type="text/javascript">
/**搜索联想弹出层所用js start**/
var customsobj;
function inListColorAdd(obj){
obj.className="inListMove";
}
function inListColorMove(obj){
obj.className="inListOut";
}
var obj_value = "--";
function showTheList(target) {
if (obj_value != $("#"+ target).val()|| $("#"+ target).val() == '') {
obj_value = $("#"+ target).val();
var obj = $("#"+ target);
$.ajax({
type:"POST",
url:"${path}/test",
data: {"name": $("#"+ target).val(),"target":target},
dataType: "html",
success: function (msg) {
$("#hhh").html(msg);
$("#hhh").css({position: "absolute", left: $(obj).offset().left, top: $(obj).offset().top + $(obj).outerHeight(), zIndex: 0});
$("#hhh").show();
}
});
}
}
function removeTheList() {
setTimeout("$('#hhh').hide()", 200);
}
function getInListValue(code,name,target) {
$("#" + target).val(name);
//$("#code" + target).val(code);
}
</script>
//通过后台访问放回到test2.html页面，然后把整个页面的内容通过ajax回调填充到定义好的DIV中来设置getInListValue点击事件，把值填充到文本款中
<!DOCTYPE html>
<html lang="zh-cn">
<div id="theList" style="border: 1px #ccc solid; width: 155px; overflow: hidden;">
<%for(var a in airPorts){%>
<div id="" class="inListOut" onmouseover="inListColorAdd(this)" onmouseout="inListColorMove(this)" onclick="getInListValue('${a.CITYCODE!}','${a.AIRPORTNAME!}','${target}')">
<div style="float: left; width: 115px; font-family: 宋体; height: 25px; " id="">${a.AIRPORTNAME!}</div>
<div style="float: left; width: 40px; font-family: 宋体; height: 25px;" id="">${a.CITYCODE!}</div>
</div>
<%}%>
</div>
后台代码：这里用的是Jfinal框架(如果用struts2都是一样的)
public class ProductManageController extends Controller {
public void text(){
String airportName=getPara("name");
Page<AirPort> airPorts=null;
if(StringUtils.isEmpty(airportName)){
airPorts=AirPort.dao.paginate(1, 10, "select * ", "from airport");//分页查询显示十条
}else {
//根据名称或者三字码来模糊查询
airPorts=AirPort.dao.paginate(1, 10, "select * ", "from airport where AIRPORTNAME like '%"+airportName+"%' or lower(CITYCODE) like lower('%"+airportName+"%')");
}
setAttr("airPorts", airPorts.getList());
setAttr("target", getPara("target"));
render("/test2.html");
}
}
效果图：
