更新 JSF 组件后，jQuery 自动完成功能不再起作用

Question

我有一个下拉菜单：

<ace:selectMenu value="#{MenuBean.cityList}" valueChangeListener="#{MenuBean.ChCountry}">
    <f:selectItems itemValue="cityList.id" itemLabel="cityList_nm_city" />
</ace:selectMenu>

和一个输入字段

<h:inputText id="form:nm" value="#{MenuBean.nm}" />  

使用 jQuery 自动完成

$(document).ready(function() {
    $("#form\\:nm").autocomplete({
        source : function(request, response) {
            $.ajax({
                url : url,
                data : {
                    method : "getnm",
                },
                success : function(data) {
                    alert("success");
                }
            });
        }
    });
});

当我更改下拉列表并更新 JSF 组件时，jQuery 自动完成功能不再起作用。这是如何引起的，我该如何解决？

Answer 1

如果我猜对了，我猜你在某处重新渲染了输入。

请记住，重新渲染组件不会使$(document).ready 函数再次执行，因此#form\\:nm 不会将autocomplete 连接到它。如果您使用f:ajax 来刷新组件，只需创建一个将autocomplete 连接到组件的JS 函数，然后在onevent 的onevent 上调用它。

类似这样的：

function loadAutocompleteField(data) {
    if(data.status == "success") {
        $("#form\\:nm").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : url ,
                    data : {
                        method : "getnm",
                    },
                    success : function(data) {
                        alert("success");
                    }
                });
            }
        });
    }
}

同样，例如，如果您使用f:ajax：

<f:ajax render="yourComponent" onevent="loadAutocompleteField" />

如果您使用其他机制，您只需在完成后调用loadAutocompleteField 函数即可。

---

编辑

确实，我最初的答案效率低下。我通常的方法是搜索与小部件相关的 CSS，如果已加载，我会避免再次连接小部件。原来f:ajax的onevent函数可以接收到包含整个ajax请求周期状态的data参数（beforeajax请求发送>complete表示ajax响应已经到达>success根据 ajax 响应更新组件）。

您需要检查该参数并仅在 DOM 更新后才连接组件。

感谢 BalusC 帮助我解决这个问题。对你来说就是这样，我通过回答一个问题学到了一些东西。