Struts2 + jQuery 自动补全答案

【问题标题】：Struts2 + jQuery AutocompletionStruts2 + jQuery 自动补全
【发布时间】：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/…

标签： dojo struts2 jquery-autocomplete

【解决方案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>

【讨论】：