按下向上或向下箭头键时，SelectOneMenu 触发 ajax

Question

当我专注于 selectOneMenu 时，当我按下向上箭头键或向下箭头键时，我需要触发 ajax 调用。

这是我的代码，我首先只尝试了向上键（它不起作用，我尝试了几种变体）

<h:selectOneMenu id="id" disabled="#!Bean.disabled}" value="#{Bean.value}" styleClass="style" onkeypress="if (event.keyCode == 38) { onchange(); return false; }">
  <f:selectItems id="idItem" value="#{Bean.options}" var="option" />
  <f:ajax event="change" execute="@this" render="group"/>
</h:selectOneMenu>

提示：Tab 键正在触发它并移动焦点（如果值更改）。我不希望 tab 键触发它。

Answer 1

只需将您的f:ajax 的事件更改为keyup，change 事件将不会发送任何 ajax 请求，除非您的selectOneMenu 失去焦点（这也通过您的提示“Tab 键正在触发它并移动焦点")。

这将像这样工作：

<f:ajax event="keyup" execute="@this" render="group"/>

更新：

我根据 BalusC 的评论更新了我的答案，即您希望仅在触发向上键或向下键时触发 ajax 请求，因此我建议您直接调用 f:ajax 在幕后调用的 javascript 函数, 所以你可以添加一个直接调用jsf.ajax.request(source, event, options)函数，你可以找到更多关于该函数here的信息。

为了使用该方法，您必须在您的 XHTML 文件中添加 JSF 的内置 JavaScript 库，如下所示：

<h:outputScript library="javax.faces" name="jsf.js"/>

然后像这样更改您的代码：

<h:selectOneMenu id="id" disabled="#!Bean.disabled}" value="#{Bean.value}" styleClass="style" 
         onkeyup="if (event.keyCode == 38 || event.keyCode == 40) { jsf.ajax.request(this, event, { render: 'form:group'}); return false;}">
   <f:selectItems id="idItem" value="#{Bean.options}" var="option" />
</h:selectOneMenu>

注意：请注意，在jsf.ajax.request() 的render 选项中，我指定了您要渲染的组件的确切ClientID，而不仅仅是组件ID (form这里是h:form 的id），如果你只想使用id group，你必须将prependId="false" 添加到你的h:form。