JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示 -

songylwq

浏览: 127284 次
性别:
来自: 济南

最近访客更多访客>>

rocex

明少

Hu_zhijia

rlcheng

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (214)

社区版块

存档分类

JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示

如果实现形如：

的jquery的自动提示下拉框效果可以采用jquery的插件：FlexBox

下面对我的一点应用心得与朋友交流下。

插件下载可以从这里：http://flexbox.codeplex.com/

下载后在FlexBox目录下有插件的JS文件（jquery.flexbox.js，jquery.flexbox.min.js），这里我测试使用的是jquery1.3.1版本，在css目录中有其样式表文件jquery.flexbox.css：

/* Input textbox - do not specify a width here, it will be overwritten */ .ffb-input { float:left; color:#000; /* must specify along with watermark color */ height:16px; /* required for webkit browsers (Safari, Chrome) */ } /* Color of watermark, if present */ .ffb-input.watermark { /* added and removed dynamically */ color:#888; /* must specify along with input color */ } /* Drop-down arrow, with sprited image */ .ffb-arrow { float:left; width:17px; height:22px; background-image:url(../img/sel_win7.gif); } .ffb-arrow.out { /* css sprite technique */ background-position:0; } .ffb-arrow.over { /* css sprite technique */ background-position:-17px 0; } .ffb-arrow.active { /* css sprite technique */ background-position:-34px 0; } .ffb-no-results { padding:2px; color:#888; font-style:italic; border-bottom:1px solid #828790; } /* Container for dropdown contents */ .ffb { position:absolute; /* this guy's parent div is hard-coded to position:relative */ overflow:hidden; border-left:1px solid #828790; /* #7B9EBD for Vista */ border-right:1px solid #828790; background-color:#fff; /* Give it a background-color, so it's not transparent */ } /* Inner div for dropdown */ .ffb .content { overflow:auto; } .ffb .content .row { border-bottom:1px solid #828790; color:#000; height:20px; clear:both; } .ffb-sel { cursor:pointer; cursor:hand; color:#fff !important; background-color:#39f; } .ffb-match { font-weight:bold; color:#000; } /* Paging */ .ffb .paging { vertical-align:middle; border-bottom:1px solid #828790; } .ffb .page, .ffb a.page { font-size:85%; padding:2px; border:solid 1px #339; background-color:#eef; margin:2px; } .ffb .box { width:22px; margin:2px; } .ffb .summary { font-size:85%; }

在img目录中有样式图片素材：

插入页面代码：

<mce:script type="text/javascript" src="js/jquery/jquery-1.3.1.js" mce_src="js/jquery/jquery-1.3.1.js"></mce:script> <mce:script type="text/javascript" src="js/jquery/flexbox/jquery.flexbox.js" mce_src="js/jquery/flexbox/jquery.flexbox.js"></mce:script>

在页面中插入div：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>.: Fairway Technologies jQuery FlexBox :.</title> <link rel="stylesheet" type="text/css" href="../FlexBox/css/jquery.flexbox.css" mce_href="FlexBox/css/jquery.flexbox.css" /> <mce:script type="text/javascript" src="../FlexBox/js/jquery-1.3.1.js" mce_src="FlexBox/js/jquery-1.3.1.js"></mce:script> <mce:script type="text/javascript" src="../FlexBox/js/jquery.flexbox.min.js" mce_src="FlexBox/js/jquery.flexbox.min.js"></mce:script> <mce:script type="text/javascript" src="js/countries.js" mce_src="js/countries.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="ffb6"></div> </body> </html>

在struts后台得到传入的数据可以是：

String pageIndex = request.getParameter("p");//页数 String pageSize = request.getParameter("s");//每页条数 String reqStr = request.getParameter("q");//条件

得到输入的条件和分页数据

返回JSON数据

response.setContentType("application/json;charset=GBK"); response.setCharacterEncoding("GBK"); PrintWriter pw = response.getWriter(); Map resMap = null; int count = attributeService.getAttrCountByCon(attr); if(count > 0){ List attrList = attributeService.getAttrListByConForPage(attr, page, size); List list = new ArrayList(); for (int i = 0; i < attrList.size(); i++) { Object[] dbRes = (Object[])attrList.get(i); resMap = new HashMap(); resMap.put("id",dbRes[0]); resMap.put("name",dbRes[1]); list.add(resMap); } resMap = new HashMap(); resMap.put("results", list.toArray()); resMap.put("total",new Integer(count)); }else{ resMap = new HashMap(); resMap.put("total",new Integer(0));//数据总数用于分页 } pw.write(JsonUtil.toJson(resMap)); pw.flush();

JSON转换类代码：

import java.util.Iterator; import java.util.Map; public final class JsonUtil { public static String toJson(Object o) { if (o==null) return "null"; if (o instanceof String) return string2Json((String)o); if (o instanceof Boolean) return boolean2Json((Boolean)o); if (o instanceof Number) return number2Json((Number)o); if (o instanceof Map) return map2Json((Map)o); if (o instanceof Object[]) return array2Json((Object[])o); if (o instanceof int[]) return intArray2Json((int[])o); if (o instanceof boolean[]) return booleanArray2Json((boolean[])o); if (o instanceof long[]) return longArray2Json((long[])o); if (o instanceof float[]) return floatArray2Json((float[])o); if (o instanceof double[]) return doubleArray2Json((double[])o); if (o instanceof short[]) return shortArray2Json((short[])o); if (o instanceof byte[]) return byteArray2Json((byte[])o); throw new RuntimeException("Unsupported type: " + o.getClass().getName()); } static String array2Json(Object[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(toJson(array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String intArray2Json(int[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Integer.toString((int)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String longArray2Json(long[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Long.toString((long)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String booleanArray2Json(boolean[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Boolean.toString((boolean)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String floatArray2Json(float[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Float.toString((float)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String doubleArray2Json(double[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Double.toString((double)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String shortArray2Json(short[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Short.toString((short)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String byteArray2Json(byte[] array) { if (array.length==0) return "[]"; StringBuffer sb = new StringBuffer(array.length << 4); sb.append('['); for (int i = 0; i < array.length; i++) { sb.append(Byte.toString((byte)array[i])); sb.append(','); } // set last ',' to ']': sb.setCharAt(sb.length()-1, ']'); return sb.toString(); } static String map2Json(Map map) { if (map.isEmpty()) return "{}"; StringBuffer sb = new StringBuffer(map.size() << 4); sb.append('{'); Iterator keys = map.keySet().iterator(); while(keys.hasNext()){ Object key = keys.next(); Object value = map.get(key); sb.append('/"'); sb.append(key); sb.append('/"'); sb.append(':'); sb.append(toJson(value)); sb.append(','); } // set last ',' to '}': sb.setCharAt(sb.length()-1, '}'); return sb.toString(); } static String boolean2Json(Boolean bool) { return bool.toString(); } static String number2Json(Number number) { return number.toString(); } static String string2Json(String s) { StringBuffer sb = new StringBuffer(s.length()+20); sb.append('/"'); for (int i=0; i<s.length(); i++) { char c = s.charAt(i); switch (c) { case '/"': sb.append("///""); break; case '//': sb.append("////"); break; case '/': sb.append("///"); break; case '/b': sb.append("//b"); break; case '/f': sb.append("//f"); break; case '/n': sb.append("//n"); break; case '/r': sb.append("//r"); break; case '/t': sb.append("//t"); break; default: sb.append(c); } } sb.append('/"'); return sb.toString(); } }

分享到：