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");
}
}
效果图：
AJAX联想查询的例子的更多相关文章
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 使用juqery-ui完成联想查询功能
最近公司的项目有个需求,需要使用联想查询功能.就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面.效果如下图: 经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数 ...
- 自己写的一个关于Linq to Entity 动态查询的例子
这两天一直想写一个动态查询的方式,先是晚上查询了一下,发现大家写的差不多都是一样的[如:http://www.cnblogs.com/ASPNET2008/archive/2012/10/28/274 ...
- php mysqli多个查询的例子
php中Mysqli多个查询的例子,感兴趣的朋友可以参考下. php中Mysqli多个查询的例子,感兴趣的朋友可以参考下. mysqli_multi_query(mysqli link,string ...
- ajax分页查询
(1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...
- MVC联想查询绑定下拉框
前言 在做搜索时,输入些内容时需要弹出下拉框给用户进行选择,极大的方便了用户,会给用户带来不一样的体验 Controller public ActionResult SSAC(string UserN ...
- ThinkPHP框架 【 AJAX方法返回 】 例子：简单添加一条数据 和 查询一个表里的数据
注:thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 在模块控制器Controller文 ...
- springMVC+ajax分页查询
项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...
- Restful风格的springMVC配搭ajax请求的小例子
1. GET请求的例子 ajax代码: 请求参数拼接在url后面(参数在服务器可通过HttpServletRequest获取,也可以直接通过@RequestParam自动注入,参考DELETE例子的方 ...
随机推荐
- Codeforces Round #198 (Div. 1) D. Iahub and Xors 二维树状数组*
D. Iahub and Xors Iahub does not like background stories, so he'll tell you exactly what this prob ...
- Struts2文件上传下载
Struts2文件上传 Struts2提供 FileUpload拦截器,用于解析 multipart/form-data 编码格式请求,解析上传文件的内容,fileUpload拦截器 默认在defau ...
- 用JAXP的SAX方式解析XML文件
简单用JAXP的SAX方式(事件驱动)解析XML文件: 文件(1.XML) <?xml version="1.0" encoding="UTF-8" st ...
- 第二个div+css前端项目
先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...
- 为什么下载APP，扫描二维码，关注微信公众号，就会送牛奶送小礼品？下载使用量高，会怎样？
以前的老办法是到处贴广告,电视上,广播上各种宣传. 在互联网时代,企业要盈利,除了不断优化升级自己的产品和服务,大量推广宣传产品,还要懂得用户思维.现在有网站,有APP,有微信,有二维码,可以卖产品, ...
- 20145223《Java程序程序设计》实验报告5
20145223杨梦云<Java网络编程> 一.实验内容 ·1.运行下载的TCP代码,结对进行,一人服务器,一人客户端: ·2.利用加解密代码包,编译运行代码,一人加密,一人解密: ·3. ...
- python闭包与装饰器
转自小马哥: 闭包和装饰器充分体现了Python语法糖的优雅感觉. 在本文中,我们的实验要完成两个工作,一个是加法,一个是累计调用加法的次数,最普通的Python程序可以这么写: def valida ...
- bootstrap的图标无法正常显示解决方法
bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...
- c#中ref和out 关键字
问题:为什么c#中要有ref和out?(而java中没有)需求假设:现需要通过一个叫Swap的方法交换a,b两个变量的值.交换前a=1,b=2,断言:交换后a=2,b=1. 现编码如下: class ...
- CSS background 属性
CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...