用于克隆文本框的 Grails Richui 自动完成功能答案

【问题标题】：Grails richui autocomplete for cloned textbox用于克隆文本框的 Grails Richui 自动完成功能
【发布时间】：2013-03-14 13:05:55
【问题描述】：

我在我的应用程序中使用grails richui autocomplete 字段。它适用于我的静态文本框，但是当我克隆文本框时，此功能不适用于克隆的文本框，甚至没有显示错误。

关于如何解决这个问题的任何想法

这是我的代码：

<resource:autoComplete skin="default" />

在顶部

<richui:autoComplete name="filterLocation1" id="filterLocation1" delimChar=";"  class="location_txtbox" action="${createLinkTo('dir': 'abc/yyy')}" style="margin-left:5px;"/>

这是我的自动完成字段

我就是这样克隆的

var counter = 1;
$("#addRow").click(function() {
counter++;
var cln = $('#static_table tbody>tr:last').clone(true);
cln.find("[id^='filterLocation']").each(function(i, val) {
    val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
});

return false;
});

我克隆整行，做一些隐藏/显示操作并增加 id。

【问题讨论】：

很多关于如何修复它的想法......但你需要向我们展示你的代码......
我已经编辑并给了我的代码 bipen.....
你是如何调用 jquery 中的自动完成功能的？？
不，我通过 jquery 调用自动完成。标签适用于静态行。我不知道如何调用 jquery。
我需要做些什么来让自动完成功能适用于该字段

标签： jquery grails autocomplete grails-plugin gsp

【解决方案1】：

当您克隆tr 时，它会克隆所有内容，其中包括插件创建的javascript。这个克隆的脚本使用id 的text field 使其成为auto complete。需要更改此 id 和文本字段才能使克隆的自动完成功能正常工作。

我使用以下脚本来更改该 ID：

<script type="text/javascript">
    var counter = 1;
    function asd() {
        var cloneContent = "<tr>" + $("#firstTrToClone").html().replace(/giveAUniqueId/g, "giveAUniqueId" + counter++) + "</tr>";
        $("#tableId").append(cloneContent);
    }
</script>

以下是我的完整工作页面：

<!DOCTYPE html>
<html>
<head>
<resource:autoComplete skin="default"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var counter = 1;
    function asd() {
        var cloneContent = "<tr>" + $("#firstTrToClone").html().replace(/giveAUniqueId/g, "giveAUniqueId" + counter++) + "</tr>";
        $("#tableId").append(cloneContent);
    }
</script>
</head>

<body>
<g:form>
<table id="tableId">
    <tr id="firstTrToClone">
        <td>
            <richui:autoComplete name="name" id="giveAUniqueId" action="${createLinkTo('dir': 'oauthCallBack/test')}"/>
        </td>
    </tr>
</table>
</g:form>

<button onclick="asd()">Clone</button>

</body>
</html>

试试看..,.

【讨论】：