Struts2 + jQuery 自动补全
Posted
技术标签:
【中文标题】Struts2 + jQuery 自动补全【英文标题】：Struts2 + jQuery Autocompletion 【发布时间】：2010-01-04 15:06:25 【问题描述】：我为我的Struts2 应用程序使用了jQuery 自动完成功能。
实际上，我的操作创建了一个 jQuery 使用的字符串列表。这是脚本：
$().ready(function()
$("#tag").autocomplete("/myAction/Action",
multiple : true,
autoFill : true,
minChars:1
);
);
在输入过程中会出现带有建议的框。问题是该框呈现另一个值， 准确呈现我的 JSP 代码（自动完成插件的 CSS 链接）。
我该如何解决这个问题？
这是我的 JSP：
<html>
<head>
<script src="<%=request.getContextPath()%>/scripts/jquery-latest.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/main.css" type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>scripts/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/<%=request.getContextPath()%>/query.dimensions.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.autocomplete.js"></script>
<script type="text/javascript">
$().ready(function()
$("#tag").autocomplete("/myAction/Action",
multiple : true,
autoFill : true,
minChars:1
);
);
</script>
</head>
<body>
<s:form action="Action" theme="simple">
<s:iterator value="elencoMateriali" var="asd">
<s:property value="#asd" escape="false"/>
</s:iterator>
<s:textfield id="tag" name="tagField" label="tag" />
</s:form>
</body>
【问题讨论】：
在寻找解决问题的方法时，我找到了另一种自动补全的方法。 Struts2 和 Dojo。 benmccann.com/dev-blog/… 【参考方案1】：我认为现在回答为时已晚，但问题仍然存在于 Struts2 中。我做了一些修改来解决这个问题：
将 jquery.struts2.js 文件复制到你的 js 路径中。
编辑 jquery.struts2.js 文件并在 Autocompleter Widget 的句柄中查找 'success: function(data)'，并将函数替换为下一个：
success: function(data)
var x = 0;
if (data[o.list] !== null)
var isMap = false;
if (!$.isArray(data[o.list]))
isMap = true;
var result = [];
$.each(data[o.list], function(j, val)
if (isMap)
result.push(
label: val.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: val,
id: j
);
else
if (o.listkey !== undefined && o.listvalue !== undefined)
result.push(
label: val[o.listvalue].replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: val[o.listvalue],
id: val[o.listkey]
);
else
result.push(
label: data[o.list][x].replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: data[o.list][x],
id: data[o.list][x]
);
x++;
);
response(result);
现在，如果您在 jsp 代码上订阅 onSelectTopics 方法，您将有一个新的 item.id 元素可用，因此您可以将 id 值设置为任何您想要的隐藏值。
现在，您的自动完成器会显示一个包含强词的列表，用选择填充输入，并将 id 保存在您可以捕获的变量中。
记得在include header部分添加修改后的js。
【讨论】：
哇！很多东西.. 但最近我用了这个 code.google.com/p/struts2-jquery 。比道场好多了..【参考方案2】：<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<s:form action="ActionJson" theme="simple">
<s:url id="elencoFuffa" action="ActionJSON"/>
<sx:autocompleter id="autocompleter" name="materiale" loadOnTextChange="true" preload="false" href="%elencoFuffa" size="24" loadMinimumCount="1" showDownArrow="false" cssClass="dropDown" onchange="submit();"/>
<s:submit value="Prosegui"/>
<s:property value="luoghiSmaltimento"/>
</s:form>
现在，行动：
public class Action extends ActionSupport
private String materiale;
private String luoghi;
private List<String> elencoMateriali;
private Map<String, String> json;
public String execute() throws Exception
System.out.println("------------------" + materiale);
return SUCCESS;
public String getMateriali() throws Exception
MaterialiDAO dao = new MaterialiDAO();
List<Materiali> toResult = new ArrayList<Materiali>();
toResult = dao.findAll();
elencoMateriali = new ArrayList<String>();
Iterator i = toResult.iterator();
while (i.hasNext())
Materiali m = (Materiali) i.next();
elencoMateriali.add(m.getValueNomemateriale());
return SUCCESS;
public String getJson() throws Exception
json = new HashMap<String, String>();
if (materiale != null && materiale.length() > 0)
MaterialiDAO dao = new MaterialiDAO();
List<Materiali> materiali = dao.findByLikeValue(materiale);
for (Materiali m : materiali)
json.put(m.getValueNomemateriale(), "" + m.getIdMateriali());
return SUCCESS;
public String trovaLuogo() throws Exception
LuoghismalDAO daoL = new LuoghismalDAO();
MaterialiDAO daoM = new MaterialiDAO();
Materiali m = daoM.findByMaterialiName(materiale);
if (m != null)
luoghi = m.getLuoghismal().getValueDescrluogo();
return SUCCESS;
else
luoghi = "-- Scegliere un materiale --";
return SUCCESS;
/* Getters and setters */
最后是struts.xml
<action name="ActionJSON" class="it.action.Action"
method="getJson">
<result type="json">
<param name="root">json</param>
</result>
</action>
【讨论】：
以上是关于Struts2 + jQuery 自动补全的主要内容，如果未能解决你的问题，请参考以下文章
jquery 自动完成 自动补全 实时搜索 实时查询 即时搜索 即时 查询
07 Jquery UI Autocomplete 自动补全插件