如何处理 p:inputText 更改事件答案

【问题标题】：How to process p:inputText change event如何处理 p:inputText 更改事件
【发布时间】：2016-04-27 12:53:36
【问题描述】：

我正在使用 p:inputText，我的要求是触发一个 javascript 函数，它会更新支持 bean searchField

<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />

<p:remoteCommand name="resetSearch" actionListener="#{searchBean.resetSearch}" process="@this" />

这是我的 javascript 函数。我用萤火虫找到了 inputText 元素的 id 和那页：j_idt18:searchForm:j_idt20_input。 id肯定是正确的

$("#page:j_idt18:searchForm:j_idt20_input").change(function() { 
    alert("Its here");
    if(!this.value) {
       resetSearch();
       } 
});

对我来说看起来不错，但是当我编辑搜索字段时，通过添加或删除不会触发警报。主要要求是调用backing bean，当用户使用退格按钮使搜索字段为空时。

我检查了 inputText 元素的 id 并编写了一个 javascript 函数

我的问题是，我如何编写 javascript/jquery 函数，它会不断监视搜索字段中的任何变化（p:inputText）。

【问题讨论】：

您的问题中的代码缺少用于 if 条件的 }，这是拼写错误吗？
$('yourPelement').on('input', function() { // do something } );
javascript调用在$(document).ready(function()中
您在寻找这个 - jsfiddle.net/nd3fL2cn 吗？

标签： javascript jquery html primefaces

【解决方案1】：

根据 jquery 选择器文档：

使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ）作为 a 的文字部分名称，必须使用两个反斜杠进行转义：\\。例如，id="foo.bar" 的元素，可以使用选择器 $("#foo\.bar")

因此，您需要对 ID 中的特殊字符进行转义

$("#page\\:j_idt18\\:searchForm\\:j_idt20_input").change(function() { 
  alert("Its here");
  if(!this.value) 
    resetSearch();
});

或使用属性等于选择器来选择具有特殊字符的目标元素：

$("[id='page:j_idt18:searchForm:j_idt20_input']").change(function() { 
  alert("Its here");
  if(!this.value)
     resetSearch();
});

【讨论】：

在 if 语句中遗漏了}？
对不起，这是一个错字，Milind 确实是正确的。我用他的代码替换了它的工作正常:-) \\ 在每个之前都需要：
@Sandra：很高兴它有帮助。 :) 不要忘记接受答案。

【解决方案2】：

无需明确编写 javascript/jquery，您可以使用 p:ajax 来满足您的要求：

  <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" 
     value="#{cc.attrs.queryProperty}" >        
        <p:ajax event="blur" listener="#{searchBean.resetSearch}" />
    </p:inputText>

只要用户键入并转到下一个组件，就会触发事件。

【讨论】：

问题是我只想在值为空的时候resetSearch，空searchField。在您的解决方案中，它会一直重置搜索字段，用户可以编辑任何内容。我的警报消息有助于调试问题以正确识别元素的 id，后来我将其从代码中删除。