当前位置： 文江博客话题详情

Struts2 + jQuery 自动完成

发布于 2024-08-16 17:45:21 字数 1940 浏览 5 评论 0原文

我为我的 jQuery 自动完成功能使用了。 org/wiki/Struts2" rel="nofollow noreferrer">Struts2 应用程序。

实际上，我的操作创建了 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>

原文

I used the jQuery autocompletion for my Struts2 application.

Pratically, my action made a list of strings that jQuery use. This is the script:

$().ready(function() {
        $("#tag").autocomplete("/myAction/Action", {
            multiple : true,
                autoFill : true,
                    minChars:1
                });
            });

During typing appear the box with the suggestions. The problem is that the box render another value,
exactly render the code of my JSP ( links to CSS for the autocomplete plug-in).

How can I solve this?

This is my 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

冷夜 2024-08-23 17:45:21

我认为现在回答已经太晚了，但问题仍然存在于 Struts2 中。我做了一些修改来解决这个问题：

  1. 将 jquery.struts2.js 文件复制到您的 js 路径中。

  2. 编辑 jquery.struts2.js 文件并在自动完成器小部件的句柄中查找“success: function(data)”，并将该函数替换为下一个：

    成功：函数（数据）{
var x = 0;
if (data[o.list] !== null) {
    var isMap = false;
    if (!$.isArray(data[o.list])) {
        isMap = true;
    }                                   
    var 结果 = [];
    $.each(数据[o.list], 函数(j, val) {
        如果（isMap）{
            结果.push({
                标签： val.replace(
                        新的正则表达式(
                                "(?![^&]+;)(?!<[^>>]*)(" +
                                $.ui.autocomplete.escapeRegex(request.term) +
                                ")(?![^<>]*>)(?![^&;]+;)", "gi"
                            ), "$1" ),
                值： 值，
                编号：j
            });
        }
        别的 {
            if (o.listkey !== 未定义 && o.listvalue !== 未定义) {
                结果.push({
                    标签： val[o.listvalue].replace(
                            新的正则表达式(
                                    "(?![^&]+;)(?!<[^>>]*)(" +
                                    $.ui.autocomplete.escapeRegex(request.term) +
                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                ), "$1" ),
                    值: val[o.listvalue],
                    id: val[o.listkey]
                });
            }
            别的 {
                结果.push({
                    标签：数据[o.list][x].replace(
                            新的正则表达式(
                                    "(?![^&]+;)(?!<[^>>]*)(" +
                                    $.ui.autocomplete.escapeRegex(request.term) +
                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                ), "$1" ),
                    值：数据[o.list][x]，
                    id: 数据[o.list][x]
                });
            }
        }
        x++;
    });
    响应（结果）；
}

    }

  3. 现在，如果您在 jsp 代码上订阅了 onSelectTopics 方法，您将拥有一个可用的新 item.id 元素，因此您可以将 id 值设置为隐藏的 o 任何您想要的值。

现在，您的自动完成器会显示一个包含强词的列表，用选择填充输入，并将 id 保留在您可以捕获的变量中。

记得在include头部分添加修改后的js。

I think it's too late for an answer, but the probles is still remaining in Struts2. I have made some modifications to solve such problem:

  1. Copy the jquery.struts2.js file into you js path.

  2. Edit the jquery.struts2.js fil and look for 'success: function(data)' in the handle of the Autocompleter Widget, and replace the function for the next one:

    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);
}

    }

  3. Now, if you subscribe a onSelectTopics method on your jsp code, you will have a new item.id element available, so you can set the id value into a hidden o whatever you want.

Now, your autocompleter show a list with the strong word, fills the input with the selection, and mantains the id in a variable you can catch.

Remember to add the modified js in the include header section.

回复 原文
流绪微梦 2024-08-23 17:45:21
<%@ 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>

<%@ 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>

Now, the Action:

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 */

At the end the struts.xml

        <action name="ActionJSON" class="it.action.Action"
        method="getJson">
        <result type="json">
            <param name="root">json</param>
        </result>
    </action>
回复 原文
~没有更多了~

关于作者

逐鹿

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

淡笑忘祈一世凡恋

文章 0 评论 0

我们的影子

文章 0 评论 0

素年丶

文章 0 评论 0

南笙

文章 0 评论 0

18215568913

文章 0 评论 0

qq_xk7Ean

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文