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例子的方 ...
随机推荐
- 湖南省第十二届大学生计算机程序设计竞赛 F 地铁 多源多汇最短路
1808: 地铁 Description Bobo 居住在大城市 ICPCCamp. ICPCCamp 有 n 个地铁站,用 1,2,…,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i ...
- cocoaPads 安装及出现Analyzing dependencies之后卡死解决方案
1.安装 a. 查看源 gem sources -l b. 设置源: sudo gem sources -a http://ruby.taobao.org c. 删除源:sudo gem source ...
- Linux之find命令用于统计信息
1. 计算当前目录中的文件数: [root@localhost tmp]# find . -type f | wc -l 2. 查找/etc目录中最新的和最旧的文件,以文件时间排序并按年-月-日的格式 ...
- 【转】清理Kylin的中间存储数据(HDFS & HBase Tables)
http://blog.csdn.net/jiangshouzhuang/article/details/51290399 Kylin在创建cube过程中会在HDFS上生成中间数据.另外,当我们对cu ...
- 浏览器 - Firefox开发者附加组件
Firefox开发者版本下载地址: https://www.mozilla.org/zh-CN/firefox/channel/desktop/#developer 教程: https://devel ...
- json 转化
1. 把java 对象列表转换为json对象数组,并转为字符串 复制代码代码如下: JSONArray array = JSONArray.fromObject(userlist); S ...
- Uva 725 Division
0.不要傻傻的用递归去构造出一个五位数来,直接for循环最小到最大就好,可以稍微剪枝一丢丢,因为最小的数是01234 从1234开始,因为倍数n最小为2 而分子是一个最多五位数,所以分母应该小于五万. ...
- wpf 背景镂空loading.....
第一步,,使用arc控件 ArcThickness="15" StartAngle="-6" EndAngle="6" 2,拉一个Ellip ...
- SPFA(负环) LightOJ 1074 Extended Traffic
题目传送门 题意:收过路费.如果最后的收费小于3或不能达到,输出'?'.否则输出到n点最小的过路费 分析:关键权值可为负,如果碰到负环是,小于3的约束条件不够,那么在得知有负环时,把这个环的点都标记下 ...
- iOS Outlets Referencing Outlets
一位网友的解释: 原址:http://www.cocoachina.com/bbs/read.php?tid-21295.html