0

我有一个下拉菜单：

<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 自动完成功能不再起作用。这是如何引起的，我该如何解决？

4

1 回答 1

2

如果我猜对了，我的猜测是您在某处重新渲染输入。

请记住，重新渲染组件不会使$(document).ready函数再次执行，因此#form\\:nm不会autocomplete连接到它。如果您使用刷新组件，只需创建一个将 连接到组件并在 上调用它f:ajax的 JS函数。autocompleteoneventf: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'sonevent函数可以接收一个数据参数，其中包含整个 ajax 请求周期的状态（before发送 ajax 请求 >complete意味着 ajax 响应已经到达 >success根据 ajax 响应更新组件）。

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

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

于 2013-06-25T14:56:20.830 回答