程序博客网 > 彩票缩水软件大全

用jQuery + Ajax实现Google输入提示功能

来源：互联网 发布：彩票缩水软件大全 编辑：程序博客网 时间：2024/04/29 13:31

1、导入jQuery1.2.6的js文件，请自行下载；

2、编写可重用的js方法：

  1. // 发送request请求
  2. // 注意：需要jQuery的支持
  3. // url:要请求的URL，如：/xxx/AjaxAction.do
  4. // data:要请求的参数，与url一起构成一个完整的URL请求，如：method=list&id=123
  5. // callback:回调函数的名称，如：send_request_callback,请求成功后，会调用send_request_callback函数
  6. function ajax_request(url,data,callback){
  7.     jQuery.ajax({
  8.        type: "POST",    // GET,POST
  9.        url: url,   // AjaxAction.do
  10.        data: data, // method=list&id=123
  11.        success: function(responseText){
  12.            var text = responseText.replace(//"/g,"///"");
  13.            var commond = callback + "(/"" + text + "/")";
  14.            eval(commond);
  15.        },
  16.        error: function (XMLHttpRequest, textStatus, errorThrown) {
  17.            alert("Ajax请求失败!");
  18.        }
  19.     });
  20. }
  22. // 将某DIV层定位到parent的正下方
  23. // 用于类似Google搜索框中下拉提示框的功能，需要和Ajax结合使用
  24. function relocation(parent,div_id){
  25.     var offsetLeft = parent.offsetLeft;  // parent相对父元素的左端端偏移量
  26.     var offsetTop = parent.offsetTop;    // parent相对父元素的顶端偏移量
  27.     var offsetHeight  = parent.offsetHeight;  // parent的高度
  29.     // 循环获得元素的父级控件，累加左和顶端偏移量
  30.     var obj = parent.offsetParent;
  31.     while (obj) {
  32.         offsetLeft += obj.offsetLeft;
  33.         offsetTop += obj.offsetTop;
  34.         obj = obj.offsetParent;
  35.     }
  37.     var div_obj = document.getElementById(div_id);
  38.     div_obj.style.position = "absolute"; // 设定child为绝对位置
  39.     div_obj.style.left = offsetLeft + "px";    // 设置child的相对左方的距离
  40.     div_obj.style.top = (offsetTop + offsetHeight) + "px";  // 设置child的相对上方的距离
  41. }
  43. // 对简体中文进行2次escape转码，后台Java需要有对应的解码方法（JavaScriptEscape.unescape(str)）。
  44. // 注意：如果只转码一次没有用
  45. function encodeEscape(ch){
  46.     return escape(escape(ch));
  47. }
  49. // 隐藏某对象，使其不可见
  50. // obj_id：对象的id属性
  51. function hidden(obj_id){
  52.     var obj = document.getElementById(obj_id);
  53.     if(typeof(obj) != "undefined"){
  54.         obj.style.display = "none";
  55.     }
  56. }
  58. // 显示某对象，使其可见
  59. // obj_id：对象的id属性
  60. function show(obj_id){
  61.     var obj = document.getElementById(obj_id);
  62.     if(typeof(obj) != "undefined"){
  63.         obj.style.display = "block";
  64.     }
  65. }

3、页面文件如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  5. <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  6. <title></title>
  7. <script type="text/javascript" language="javascript" src="/script/jquery/jquery-1.2.6.min.js"></script>
  8. <script type="text/javascript" language="javascript" src="/script/jquery/ajax.js"></script>
  9. <style type="text/css">
  10. .tip_div{
  11.     background-color:#F7E3DC;
  12.     height:200px;
  13.     overflow:auto;
  14.     display:none;
  15. }
  16. .tip_div_table{
  17.     margin:0;
  18.     border-collapse:collapse;
  19.     border:1px solid #D99D9D;
  20. }
  21. .tip_div_table tr{
  22.     margin:0;
  23.     padding:0;
  24. }
  25. .tip_div_table td {
  26.     border:1px solid #D99D9D;
  27.     margin:0;
  28.     padding:-2 0 -2 2px;
  29.     white-space:nowrap;
  30. }
  31. </style>
  32. <script language="javascript">
  33. // 搜索产品名称
  34. var search_CPMC_last_value = "";
  35. function search_CPMC(){
  36.     // 产品名称
  37.     var CPMC = document.getElementById("CPMC").value;
  38.     if(CPMC != "" && CPMC == search_CPMC_last_value){
  39.         return;
  40.     } else {
  41.         search_CPMC_last_value = CPMC;
  42.     }
  44.     // 表名
  45.     var LX = document.getElementById("LX").value;
  46.     var table = "QYSJ_HZ_CPYB" + LX;
  47.     // 行业大类
  48.     var HYDL = document.getElementById("HYDL_select").value;
  49.     document.frm.HYDL.value = HYDL;
  51.     if(HYDL != ""){
  52.         var url = "/AjaxAction.do";
  53.         var data = "method=query_CPMC_for_input&select_name=CPMC&table=" + table + "HYDL=" + encodeEscape(HYDL) + "CPMC=" + encodeEscape(CPMC);
  54.         ajax_request(url,data,"search_CPMC_callback");
  55.     }
  56. }
  57. // 搜索产品名称 回调函数
  58. function search_CPMC_callback(responseText){
  59.     document.getElementById("CPMC_div").innerHTML = responseText;
  60.     document.getElementById("CPMC_div").style.display = "block";
  61.     relocation(document.getElementById("CPMC"),'CPMC_div');
  62. }
  63. function do_select_CPMC(CPMC){
  64.     document.getElementById("CPMC").value = CPMC;
  65.     hidden("CPMC_div");
  66. }
  67. </script>
  68. </head>
  70. <body>
  71. 行业大类：
  72. <select id="HYDL_select" class="SelectBox">
  73.     <option value="" selected>选择行业</option>
  74.     <option value="电子信息" >电子信息</option>
  75.     <option value="石化" >石化</option>
  76. </select>
  77. <input type="text" id="CPMC" name="CPMC" value="" ondblclick="search_CPMC()" onKeyUp="search_CPMC()" />
  78. <div id="CPMC_div" class="tip_div">没有结果</div>
  80. </body>
  81. </html>

4、后台Action代码如下，主要功能就是查询数据库，拼接HTML代码，然后传到页面中。

  1.     public ActionForward query_CPMC_for_input(ActionMapping mapping, ActionForm form,
  2.             HttpServletRequest request, HttpServletResponse response,
  3.             ActionContext context) throws Exception {
  4.         // request.setCharacterEncoding("UTF-8");
  5.         CommonService cs = CommonService.getInstance();
  6.         EscapeTool esc = new EscapeTool();
  7.         StringBuffer sb = new StringBuffer();
  8.         // 下拉列表的name值
  9.         String select_name = RequestUtils.getParameter(request, "select_name", null);
  10.         // 行业大类（名称）
  11.         String HYDL = RequestUtils.getParameter(request, "HYDL", null);
  12.         HYDL = AjaxEncode(HYDL);
  13.         // 已输入的产品名称
  14.         String CPMC = RequestUtils.getParameter(request, "CPMC", null);
  15.         CPMC = AjaxEncode(CPMC);
  16.         // 省市名称
  17.         String SSMC = RequestUtils.getParameter(request, "SSMC", null);
  18.         SSMC = AjaxEncode(SSMC);
  19.         // 要查询的表名
  20.         String table = RequestUtils.getParameter(request, "table", null);
  21.         
  22.         // 表名不能为空，且行业大类和省市名称不能同时都为空（即允许之一为空）
  23.         if(table != null && (HYDL != null || SSMC != null)){
  24.             // 根据行业、省市查询产品列表，
  25.             List CPMC_list = ...;
  26.             
  27.             // 拼接select组件
  28.             sb.append("<table class=/"tip_div_table/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">");
  29.             for (int i = 0; i < CPMC_list.size(); i++) {
  30.                 Map map = (Map)CPMC_list.get(i);
  31.                 String MC = (String)map.get("CPMC");
  32.                 MC = esc.html(MC);
  33.                 sb.append("<tr>");
  34.                 sb.append("<td onclick=/"do_select_" + select_name + "('" + MC + "')/">" + MC + "</td>");
  35.                 sb.append("</tr>");
  36.             }
  37.             sb.append("</table>");
  38.         }
  39.         
  40.         response.setHeader("Cache-Control", "no-cache, must-revalidate");
  41.         response.setContentType("text/html;charset=GBK");
  42.         response.getWriter().write(sb.toString());
  43.         
  44.         return null;
  45.     }
  46.     
  47.     /**
  48.      * 对Ajax传过来的字符串进行解码
  49.      * @param str
  50.      * @return
  51.      */
  52.     private String AjaxEncode(String str){
  53.         String ret = null;
  54.         try {
  55.             if(str != null){
  56.                 ret = JavaScriptEscape.unescape(str);
  57.             }
  58.         } catch (Exception e) {
  59.             e.printStackTrace();
  60.         }
  61.         
  62.         return ret;
  63.     }

5、最后要注意的主要是Ajax传参数时的编码问题，此例主要使用encodeEscape()方法在传参数之前进行编码，然后在Action中用JavaScriptEscape.unescape(str)转码。源码如下：

  1. /**
  2.  * JavaScript escape/unescape 编码的Java实现
  3.  * author jackyz keep this copyright info while using this method by free
  4.  */
  5. public class JavaScriptEscape {
  6.     private final static String[] hex = { "00", "01", "02", "03", "04", "05",
  7.             "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F", "10",
  8.             "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B",
  9.             "1C", "1D", "1E", "1F", "20", "21", "22", "23", "24", "25", "26",
  10.             "27", "28", "29", "2A", "2B", "2C", "2D", "2E", "2F", "30", "31",
  11.             "32", "33", "34", "35", "36", "37", "38", "39", "3A", "3B", "3C",
  12.             "3D", "3E", "3F", "40", "41", "42", "43", "44", "45", "46", "47",
  13.             "48", "49", "4A", "4B", "4C", "4D", "4E", "4F", "50", "51", "52",
  14.             "53", "54", "55", "56", "57", "58", "59", "5A", "5B", "5C", "5D",
  15.             "5E", "5F", "60", "61", "62", "63", "64", "65", "66", "67", "68",
  16.             "69", "6A", "6B", "6C", "6D", "6E", "6F", "70", "71", "72", "73",
  17.             "74", "75", "76", "77", "78", "79", "7A", "7B", "7C", "7D", "7E",
  18.             "7F", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89",
  19.             "8A", "8B", "8C", "8D", "8E", "8F", "90", "91", "92", "93", "94",
  20.             "95", "96", "97", "98", "99", "9A", "9B", "9C", "9D", "9E", "9F",
  21.             "A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "AA",
  22.             "AB", "AC", "AD", "AE", "AF", "B0", "B1", "B2", "B3", "B4", "B5",
  23.             "B6", "B7", "B8", "B9", "BA", "BB", "BC", "BD", "BE", "BF", "C0",
  24.             "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "CA", "CB",
  25.             "CC", "CD", "CE", "CF", "D0", "D1", "D2", "D3", "D4", "D5", "D6",
  26.             "D7", "D8", "D9", "DA", "DB", "DC", "DD", "DE", "DF", "E0", "E1",
  27.             "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "EA", "EB", "EC",
  28.             "ED", "EE", "EF", "F0", "F1", "F2", "F3", "F4", "F5", "F6", "F7",
  29.             "F8", "F9", "FA", "FB", "FC", "FD", "FE", "FF" };
  31.     private final static byte[] val = { 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  32.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  33.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  34.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  35.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x00, 0x01,
  36.             0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x3F, 0x3F, 0x3F,
  37.             0x3F, 0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F,
  38.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  39.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  40.             0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F, 0x3F,
  41.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  42.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  43.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  44.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  45.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  46.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  47.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  48.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  49.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  50.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  51.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  52.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  53.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
  54.             0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F };
  56.     /**
  57.      * 编码
  58.      * 
  59.      * @param s
  60.      * @return
  61.      */
  62.     public static String escape(String s) {
  63.         StringBuffer sbuf = new StringBuffer();
  64.         int len = s.length();
  65.         for (int i = 0; i < len; i++) {
  66.             int ch = s.charAt(i);
  67.             if ('A' <= ch && ch <= 'Z') {
  68.                 sbuf.append((char) ch);
  69.             } else if ('a' <= ch && ch <= 'z') {
  70.                 sbuf.append((char) ch);
  71.             } else if ('0' <= ch && ch <= '9') {
  72.                 sbuf.append((char) ch);
  73.             } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
  74.                     || ch == '~' || ch == '*' || ch == '/'' || ch == '('
  75.                     || ch == ')') {
  76.                 sbuf.append((char) ch);
  77.             } else if (ch <= 0x007F) {
  78.                 sbuf.append('%');
  79.                 sbuf.append(hex[ch]);
  80.             } else {
  81.                 sbuf.append('%');
  82.                 sbuf.append('u');
  83.                 sbuf.append(hex[(ch >>> 8)]);
  84.                 sbuf.append(hex[(0x00FF & ch)]);
  85.             }
  86.         }
  87.         return sbuf.toString();
  88.     }
  90.     /**
  91.      * 解码 说明：本方法保证 不论参数s是否经过escape()编码，均能得到正确的“解码”结果
  92.      * 
  93.      * @param s
  94.      * @return
  95.      */
  96.     public static String unescape(String s) {
  97.         StringBuffer sbuf = new StringBuffer();
  98.         int i = 0;
  99.         int len = s.length();
  100.         while (i < len) {
  101.             int ch = s.charAt(i);
  102.             if ('A' <= ch && ch <= 'Z') {
  103.                 sbuf.append((char) ch);
  104.             } else if ('a' <= ch && ch <= 'z') {
  105.                 sbuf.append((char) ch);
  106.             } else if ('0' <= ch && ch <= '9') {
  107.                 sbuf.append((char) ch);
  108.             } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
  109.                     || ch == '~' || ch == '*' || ch == '/'' || ch == '('
  110.                     || ch == ')') {
  111.                 sbuf.append((char) ch);
  112.             } else if (ch == '%') {
  113.                 int cint = 0;
  114.                 if ('u' != s.charAt(i + 1)) {
  115.                     cint = (cint << 4) | val[s.charAt(i + 1)];
  116.                     cint = (cint << 4) | val[s.charAt(i + 2)];
  117.                     i += 2;
  118.                 } else {
  119.                     cint = (cint << 4) | val[s.charAt(i + 2)];
  120.                     cint = (cint << 4) | val[s.charAt(i + 3)];
  121.                     cint = (cint << 4) | val[s.charAt(i + 4)];
  122.                     cint = (cint << 4) | val[s.charAt(i + 5)];
  123.                     i += 5;
  124.                 }
  125.                 sbuf.append((char) cint);
  126.             } else {
  127.                 sbuf.append((char) ch);
  128.             }
  129.             i++;
  130.         }
  131.         return sbuf.toString();
  132.     }
  134.     public static void main(String[] args) {
  135.         String stest = "简体中文1234 abcd[]()<+>,.~//";
  136.         System.out.println(stest);
  137.         System.out.println(escape(stest));
  138.         System.out.println(unescape(escape(stest)));
  139.     }
  141. }

 

 

 

彩票缩水软件大全 彩票缩水软件大全
原创粉丝点击
热门IT博客
lol移动网络加速器lol移动网络加速器
软件技术发展软件技术发展
sai软件下载win10
网络教育怎么考试
知乎 儿童科学书目
马蓉淘宝店铺
用户画像数据建模方法
斗鱼抢宝箱软件
广州市米多网络怎么样
淘宝手机端详情页像素
linux 启用snmp
sql中绝对值函数
ios好玩的网络手游
纽约旅游 知乎
淘宝上买生活用品
ubuntu guest切换root
关于域名
evga显卡软件
服务器怎么使用域名
大数据运营招聘
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 脖子上长疱疹怎么办 拍合照就面瘫怎么办 鼻子垫歪了怎么办 洗头没吹干头疼怎么办 突然半边脸面瘫怎么办 面瘫的脸疼怎么办 左脸比右脸瘦怎么办 左边脸有点面瘫怎么办 轻微半边脸面瘫怎么办 咳嗽震的头疼怎么办 卡马西平中毒怎么办 卡马西平过量怎么办 喉症丸吃了90粒怎么办 手神经病毒损伤怎么办 上眼皮神经跳怎么办 眼睛神经长期跳怎么办 眼睛下面神经跳怎么办 老人有中风前兆怎么办 出现中风前兆该怎么办 老人突然中风了怎么办 发现中风的前兆怎么办 双侧输卵管堵塞怎么办 输卵管两侧全堵怎么办 化疗一次后脱发怎么办 下嘴唇有点歪怎么办 说话时下嘴唇歪怎么办 嘴突然有点歪怎么办 黄鳝的皮黏黏的怎么办 颗粒捕捉器堵塞怎么办 演员不能出戏怎么办 眼睛进盐了怎么办 小型餐饮备案证怎么办 摆地摊城管来了怎么办 买到问题食品怎么办 右边脸部神经疼怎么办 眼睑肌痉挛z怎么办 血管痉挛性头痛怎么办 突然右脸面瘫怎么办 失眠导致的头疼怎么办 长期失眠头疼该怎么办 头疼引起的失眠怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里