JQuery 自动完成在 button/link 单击时不起作用

Question

我有以下代码，它在单击按钮时调用 jquery JSON 自动完成。它仅在第一次按预期工作，当我单击命令 link 时调用自动完成，但下次当我开始在文本框中键入时触发自动完成（在我单击命令 [= 之前） 17=]).当我刷新页面时它再次工作 - 自动完成仅在 link 单击时调用。

<ui:component>
    <tr:panelGroupLayout>
        <tr:inputText id="#{id}" value="#{value}">
        </tr:inputText>

    <tr:commandLink id="idGlobalTrigger" partialSubmit="true">
        <tr:image source="/resources/images/tick_light.gif"></tr:image>
    </tr:commandLink>
    </tr:panelGroupLayout>
    <script>
    $("#idGlobalTrigger").click(function() {
    /*text box id   */                  
        var jqueryObj = "#"+"#{id}";    
        $(jqueryObj).autocomplete({
                source : function(request, response) {                      
                    $.ajax({
                        type : "GET",
                        url : "#{facesContext.externalContext.requestContextPath}/GlobalServlet",
                        data : {
                            term : request.term
                        },
                        dataType : "json",
                        success : function(
                                data) {
                            response(data);
                        },
                        error : function(
                                XMLHttpRequest,
                                textStatus,
                                errorThrown) {
                            // alert('Error1'+textStatus +textStatus);
                        }
                    });
                }
            });

            $(jqueryObj).focus();
            $(jqueryObj).autocomplete("search");
         });
    </script>
</ui:component>

Answer 1

尝试将自动完成逻辑包装在函数中并在 document.ready

上调用该函数

 $(document).ready(function() {
    autocomplete()
    });

function autoComplete(){
//logic here
};

Answer 2

听起来你可能在复合你的听众。换句话说，在单击而不是页面加载时调用 autoComplete 函数（这是已经提到的最佳实践）意味着每次用户单击元素时都会添加另一个相同的侦听器。

每次单击该元素时，您都需要清除所有以前的侦听器，以防止它们受到 "piling up" 的影响。尝试使用此代码段更新您的代码：

 $("#idGlobalTrigger").off("click").on("click",function() {

Answer 3

我重新初始化 select 事件的自动完成。这解决了我的问题。

$(jqueryObj).on("autocompleteselect", function(event,ui) {          
        $(jqueryObj).autocomplete({
            source : null,
            response: function( event, ui ) {
                ui.content.push({value:'', id:0, label:''});
            } 
        });

JQuery 自动完成在 button/link 单击时不起作用

JQuery Autocomplete not working on button/link click

jquery

autocomplete

myfaces

trinidad