我有下面的代码,它在按钮点击时调用jquery JSON自动完成。它只是第一次按预期工作,当我点击命令链接时调用自动完成,但下次当我开始在文本框中输入时触发自动完成(在我点击命令链接之前)。当我刷新仅在链接点击时调用的页面自动完成时,它再次起作用。
<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>
答案 0 :(得分:0)
尝试在函数中包装自动完成逻辑并调用document.ready
上的函数 $(document).ready(function() {
autocomplete()
});
function autoComplete(){
//logic here
};
答案 1 :(得分:0)
听起来你可能会使听众感到复杂。换句话说,在单击而不是在页面加载上调用autoComplete函数(这是已经提到的最佳实践)意味着每次用户单击元素时都会添加另一个相同的侦听器。
每次单击元素时,您都需要清除以前的任何侦听器,以防止它们“堆积”。尝试使用此代码段更新代码:
$("#idGlobalTrigger").off("click").on("click",function() {
答案 2 :(得分:0)
我在select事件上重新初始化自动完成。这解决了我的问题。
$(jqueryObj).on("autocompleteselect", function(event,ui) {
$(jqueryObj).autocomplete({
source : null,
response: function( event, ui ) {
ui.content.push({value:'', id:0, label:''});
}
});