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例子的方 ...
随机推荐
- PRD产品需求文档
什么是PRD? PRD是Product Requirement Document的英文缩写,即产品需求文档的意思.PRD昰产品流程中的最后一步工作,是将原型中的功能.界面具象化描述,是提交给设计(UI ...
- 10 个学习iOS开发的最佳网站（转）
10 个学习iOS开发的最佳网站 作者 jopen 2012-09-26 08:59:56 1) Apple Learning Objective C Objective-C,通常写作ObjC和较少用 ...
- unfortunately launcher has stopped
设定虚拟机的配置.
- JDBC之——一个单线程JDBC基类和一些注意事项
下面的一个DBase基类提供了一些jdbc的基本操作,配置文件的配置部分并不准确,只是在自己机器上的mysql中测试过.. 数据库的增删改方法中都在开始调用了getConnection方法,末尾调用了 ...
- iOS 钥匙串 指纹识别 get和Post请求的区别
01-钥匙串 1. 通过系统提供的钥匙串功能可以在本地保存密码,系统使用AES的方式对密码加密 a. 查看Safari中保存的密码 2. 使用第三方框架SSKeychain把密码保存到钥匙串和获取钥匙 ...
- RDS MySQL 全文检索相关问题的处理
RDS MySQL 全文检索相关问题 1. RDS MySQL 对全文检索的支持 2. RDS MySQL 全文检索相关参数 3. RDS MySQL 全文检索中文支持 3.1 MyISAM 引擎表 ...
- slide.js使用文档
<!doctype html> <head> <script src="js/jquery-latest.min.js"></script ...
- Arduino101学习笔记（五）—— 模拟IO
1.配置IO管脚 //***************************************************************************************** ...
- HTTP协议开发应用-文件服务器
HTTP(超文本传输协议)协议是建立在TCP传输协议之上的应用层协议.HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 本文将重点介绍如何基于Netty的 ...
- SpringRMI解析4-客户端实现
根据客户端配置文件,锁定入口类为RMIProxyFactoryBean,同样根据类的层次结构查找入口函数. <bean id="rmiServiceProxy" class= ...