您的位置：首页 > Web前端 > JQuery

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

2010-12-02 21:35 976 查看
如果实现形如：



的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"><!--
$(function() {
// Setting an initial value, and changing the page size
$('#ffb6').flexbox(countries, {
method: 'GET', // 提交数据方式“GET”或是“POST”，一定要注意大小写;默认GET
queryDelay: 100, // 查询延迟，在查询前的时间毫秒单位;默认为100毫秒
allowInput: true, // 是否允许用户输入；默认允许
containerClass: 'ffb',
contentClass: 'content',
selectClass: 'ffb-sel',
inputClass: 'ffb-input',
arrowClass: 'ffb-arrow',
matchClass: 'ffb-match',
noResultsText: 'No matching results', // 没有数据返回的提示信息
noResultsClass: 'ffb-no-results', // 没有数据返回时提示信息的样式
showResults: true, // 是否显示结果
selectFirstMatch: true, // 是否自动选中第一个结果
autoCompleteFirstMatch: false, // 是否自动根据第一条数据补充完成
highlightMatches: true, // 高亮显示匹配的结果
highlightMatchesRegExModifier: 'i', // 'i' for case-insensitive, 'g' for global (all occurrences), or combine
minChars: 1, // 最少输入字符数
showArrow: true, // 是否显示右边的倒三角，false：形如google提示样式
arrowQuery: '', // 当箭头点击后查询(the query to run when the arrow is clicked)
onSelect: false, // function to run when a result is selected.  this.getAttribute('hiddenValue') gets you the value of options.hiddenValue
maxCacheBytes: 32768, // 最大缓存字节数，0为不缓存(in bytes, 0 means caching is disabled)
resultTemplate: '{name}', // 返回模板 ({id}-{name}则显示如：12-测试 )html template for each row (put json properties in curly braces)
displayValue: 'name', // 显示的值 json element whose value is displayed on select
hiddenValue: 'id', // 隐藏值 json element whose value submitted when form is submitted
initialValue: '', // form读取时的初始值 what should the value of the input field be when the form is loaded?
watermark: '', // text that appears when flexbox is loaded, if no initialValue is specified.  style with css class '.ffb-input.watermark'
width: 200, // 下拉框长度 total width of flexbox.  auto-adjusts based on showArrow value
resultsProperty: 'results', // 返回属性 用于json的键 json property in response that references array of results
totalProperty: 'total', // 总数属性，返回的json用来保存总数的键，用于分页 json property in response that references the total results (for paging)
maxVisibleRows: 0, // 最大可见行数，默认是0，可以忽略 default is 0, which means it is ignored.  use either this, or paging.pageSize
paging: {
style: 'input', // 跳转页数输入格式，默认输入框或是列表(1，2，3...)or 'links'
cssClass: 'paging', // 分页样式 prefix with containerClass (e.g. .ffb .paging)
pageSize: 10, // 每页分页数如果显示条数小于这个数则不显示分页按钮 acts as a threshold.  if <= pageSize results, paging doesn't appear
maxPageLinks: 5, // 最大分页数字显示，只对分页链表样式有作用 used only if style is 'links'
showSummary: true, // 是否显示分页(共 {total}条 当前{page}/{pages}页)提示信息 whether to show '共 {total}条 当前{page}/{pages}页' text
summaryClass: 'summary', // 分页（共 {total}条 当前{page}/{pages}页）提示信息的样式 class for '共 {total}条 当前{page}/{pages}页', prefix with containerClass
summaryTemplate: '共 {total}条 当前{page}/{pages}页' // can use {page} and {pages} as well
}
});

});

// --></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();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航