AJAX联想查询的例子

时间：2022-09-18 21:52:44

//通过输入值的不断改变而改变（按键事件）提示内容的功能，然后可以选着你想要的内容填充进来。

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联想查询的例子

AJAX联想查询的例子的更多相关文章

  1. php&plus;jquery&plus;ajax&plus;json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. 使用juqery-ui完成联想查询功能

    最近公司的项目有个需求,需要使用联想查询功能.就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面.效果如下图: 经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数 ...

  3. 自己写的一个关于Linq to Entity 动态查询的例子

    这两天一直想写一个动态查询的方式,先是晚上查询了一下,发现大家写的差不多都是一样的[如:http://www.cnblogs.com/ASPNET2008/archive/2012/10/28/274 ...

  4. php mysqli多个查询的例子

    php中Mysqli多个查询的例子,感兴趣的朋友可以参考下. php中Mysqli多个查询的例子,感兴趣的朋友可以参考下. mysqli_multi_query(mysqli link,string ...

  5. ajax分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  6. MVC联想查询绑定下拉框

    前言 在做搜索时,输入些内容时需要弹出下拉框给用户进行选择,极大的方便了用户,会给用户带来不一样的体验 Controller public ActionResult SSAC(string UserN ...

  7. ThinkPHP框架 【 AJAX方法返回 】 例子：简单添加一条数据 和 查询一个表里的数据

    注:thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 在模块控制器Controller文 ...

  8. springMVC&plus;ajax分页查询

    项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...

  9. Restful风格的springMVC配搭ajax请求的小例子

    1. GET请求的例子 ajax代码: 请求参数拼接在url后面(参数在服务器可通过HttpServletRequest获取,也可以直接通过@RequestParam自动注入,参考DELETE例子的方 ...

随机推荐

  1. HTML5 canvas学习笔记（一）

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  2. ThinkPHP系的两个东东OneThink和ThinkCMF

    假设有这样一个命题:需要对一个已有系统进行移植,有没有什么系统是适合用来作为进行快速移植的基础的.能解决每个系统的基本问题,只需考虑相关业务逻辑问题. OneThink是TP团队官方出品. http: ...

  3. Css&lowbar;Backgroud-position（背景图片）定位问题详解

    background-position的说明:    设置或检索对象的背景图像位置.必须先指定 background-image 属性.该属性定位不受对象的补丁属性( padding )设置影响.   ...

  4. Maven笔记（一）

    1. 坐标 Maven坐标为各种构件引入了秩序,任何一个构件都有必须明确定义自己的坐标,而一组Maven坐标是通过一些元素定义的,它们是groupId, artifactId, version, pa ...

  5. css中的颜色值

    下面是比较适合在测试页面中用来设置背景颜色的淡颜色,最好记住一些,dark.blue.red.green.gray.olive颜色较深.

  6. Python爬虫&lpar;十一&rpar;&lowbar;案例：使用正则表达式的爬虫

    本章将结合先前所学的爬虫和正则表达式知识,做一个简单的爬虫案例,更多内容请参考:Python学习指南 现在拥有了正则表达式这把神兵利器,我们就可以进行对爬取到的全部网页源代码进行筛选了. 下面我们一起 ...

  7. Gentoo&lpar;贱兔&rpar;Linux安装笔记

      网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...

  8. 从Excel获取请求体

    Excel文件 .py文件---------------------- import xlrdimport re def fetch_body(path,sheet,name,adict):     ...

  9. SET NOCOUNT &lbrace; ON &vert; OFF &rcub;

    当 SET NOCOUNT 为 ON 时,不返回计数(表示受 Transact-SQL 语句影响的行数) SET NOCOUNT 为 ON 时,也更新 @@ROWCOUNT 函数. 当 SET NOC ...

  10. KazaQ&&num;39&semi;s Socks （找规律）

    #include<iostream> using namespace std; #define ll long long ll n, m; ll t; int main(){ while ...

相关文章