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例子的方 ...
随机推荐
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- Android Studio在导入eclipse的项目时一直卡在gradle:Configure project
学Java的时候用的是eclipse,写android代码的时候用了疯狂android讲义推荐的AS.在用AS的时候出了很多问题,比如我想从别人那里拷贝eclipse写的工程的时候就遇到了Gradle ...
- C#的Enum——枚举
枚举 枚举类型声明为一组相关的符号常数定义了一个类型名称.枚举用于“多项选择”场合,就是程序运行时从编译时已经设定的固定数目的“选择”中做出决定. 枚举类型(也称为枚举)为定义一组可以赋给变量的命名整 ...
- 廖雪峰js教程笔记 1
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...
- constructor
function Person(name){ this.name = name; } Person.prototype = { constructor : Person, sayName : func ...
- ccpc_南阳 C The Battle of chibi dp + 树状数组
题意:给你一个n个数的序列,要求从中找出含m个数的严格递增子序列,求能找出多少种不同的方案 dp[i][j]表示以第i个数结尾,形成的严格递增子序列长度为j的方案数 那么最终的答案应该就是sigma( ...
- JavaScript eval() 函数
定义和用法:eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法:eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 Java ...
- DOM基础3
隔行变色 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- Post请求
写在前面的话: XMLHttpRequest对象的open方法的第一个参数为request-type,取值可以为get或post.本篇介绍post请求. 使用post方式时,浏览器会把各表单中字段元素 ...
- varchar和Nvarchar区别
http://www.cnblogs.com/yelaiju/archive/2010/05/29/1746826.html Unicode字符集就是为了解决字符集这种不兼容的问题而产生的,它所有的字 ...