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

Posted 2023-02-22

【中文标题】更新 JSF 组件后，jQuery 自动完成功能不再起作用

【英文标题】：jQuery autocomplete doesn't work anymore after updating JSF components

【发布时间】：2013-06-22 10:22:15

【问题描述】：

我有一个下拉菜单：

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

【参考方案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 帮助我解决这个问题。对你来说就是这样，我通过回答一个问题学到了一些东西。

【讨论】：

这是低效的。 onevent 处理程序在 ajax 请求期间被调用 3 次。

@BalusC 嗯，是的，确实，我没有考虑到这一点。由于自动完成不会在元素上嵌套相关组件，因此可以通过添加一个确定小部件是否已加载的检查来限制 autocomplete 添加三次，但这可能会变得棘手，如果OP 有不止一个自动完成功能。在修复我的烂摊子之前，我会搜索一些东西。

相关：***.com/questions/13540298/… 和 ***.com/questions/13081129/…

@BalusC 再次感谢您。上帝！关于 JSF，你有什么不知道的吗？

这样更好。 JSF 毕竟只是 Java 代码，它生成的只是 html 和 JS。我非常了解 Java、HTML 和 JS :)