更新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刷新组件，只需创建一个JS函数，将autocomplete连接到组件并在onevent f:ajax上调用它。

这样的事情：

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的{​​{1}}函数可以接收一个数据参数，其中包含整个ajax请求周期的状态（发送onevent ajax请求＆gt; before表示ajax响应已经到达＆gt; complete根据ajax响应更新组件。

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

感谢BalusC帮助我解决这个问题。这对你来说很重要，我通过回答一个问题来学习。