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 key is firing it and moving the focus ").

它将像这样工作：

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

更新：

我根据 BalusC 的评论更新了我的答案，即您希望仅在触发向上键或向下键时触发 ajax 请求，因此我建议您直接调用 javascript 函数 f:ajax 在幕后调用，因此您可以添加对 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 render 而不仅仅是组件 id（form 在这里是 h:form 的 id），如果你只想使用 id group，你必须将 prependId="false" 添加到你的 h:form.

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

SelectOneMenu fire ajax when up or down arrow key is pressed

ajax

jsf

更新：