在primefaces autocomplete事件中将值重置为null

Posted 2021-05-04

我有一个自动完成事件，一旦选择了值，就会正确触发。我删除文本框中的值并将值重置为null后，我想要触发另一个事件。我在考虑使用onChange属性，但是我遇到了问题，所以我又恢复了原来的代码。

<p:autoComplete id="deviceAuto" dropdown="true" scrollHeight="250" 
                value="#{summaryReportController.device.nickname}" 
                forceSelection="true" 
                completeMethod="#{summaryReportController.deviceComplete}">
    <p:ajax event="itemSelect" 
        listener="#{summaryReportController.handleDeviceSelect}" 
        update="printThis" />  
</p:autoComplete> 

public void handleDeviceSelect(SelectEvent event) {
    String deviceSelect = event.getComponent().getId();
    if (deviceSelect.equalsIgnoreCase("deviceAuto")) {
        Device selectedDevice = deviceMgr.getDevicebyNickname(device.getNickname());
        setDevice(selectedDevice);
    }
    updateInterface();
}

答案

修改自动完成文本字段的文本内容时，将在辅助bean上调用搜索方法（也称为completeMethod）。如果你得到一个空字符串，你可以将值重置为null。

支持Bean

// insert getter and setter for the device property ...

/** Search for devices by name */
public List<String> deviceComplete(String search) {
    if (StringUtils.isBlank(search)) {
        setDevice(null);  // textfield was cleared, reset device value!
        return Collections.emptyList();
    } else {
        // search for devices ...
        return deviceNames;
    }
}

请注意，我使用Apache Commons StringUtils.isBlank(String)来检查字符串是否为空或仅包含空格字符。

JSF查看

在您的Xhtml文件中，您可能希望收听任何Ajax事件来更新您的视图 - 或者您自己找出所需的事件（模糊，变化等等）：

<p:autoComplete ...>
    <p:ajax event="itemSelect" listener="..." update="..." />
    <p:ajax process="@this" update="..." />
</p:autocomplete>

我希望这有帮助。

---

替代方案可以是搜索文本字段旁边的“清除”或“重置”按钮，以使用户清楚该值将被清除。

另一答案

默认的autoComplete minQueryLength属性等于1，当您删除它时，您的搜索字符串将被更新，直到它的长度为1个字符。

例如：您输入'foo' - 此字符串提供给搜索方法（输入第一个字符后更新 - minQueryLength = 1）

但是当你删除搜索字符串时 - 它也会被更新，直到它的长度为1。

解决方案：设置属性minQueryLength="0"

要么：

如果您需要更大的价值添加到您的autoCompleteMethod(String search)条件：

if (search.length()<={your minQueryLength attribute} )   field = null;

另一答案

老问题，但我认为值得另一种看法。

minQueryLenth = 0或minQueryLenth = 1的问题是它可以返回数百个选项（并且肯定用户不会读取所有选项）。我的解决方案如下。

首先，我需要在用户选择其中一个值时将输入发送到服务器（在我的用例中，如果此值为null或为空，则不允许用户转到向导的下一步）。所以我在选择值的情况下触发了一个ajax函数。

XHTML：

<p:autoComplete
    id="someId"
    value="#{myViewScopedBean.selectedValue}"
    ...
    ...
    minQueryLenth="5"
    onblur="autoCompleteLostFocus('someId', 'someCommand()')">

    <p:ajax
        event="itemSelect"
        listener="#{myViewScopedBean.newValueSelected}"
        process="@this"
        update="commandButtonGoToNextStep" />

</p:autoComplete>


<p:remoteCommand
    name="someCommand"
    actionListener="#{myViewScopedBean.setValueNull}"
    update="commandButtonGoToNextStep" />


<p:commandButton
    id="commandButtonGoToNextStep"
    ...
    ...
    disabled="#{myViewScopedBean.selectedValue == null}" />

如果用户清理文本，我需要将该值发送到“myViewScopedBean”并更新允许用户进入下一步的组件。我解决了将自动完成失去焦点时调用的javascript函数。

JavaScript的：

function autoCompleteLostFocus(autocompleteId, comand) {

    if ($("[id='" + autocompleteId + "_input']").val().trim() == "") {
        eval(comando);
    }

}

在我的ViewScoped Bean中：

public void setValueNull() {
    selectedValue = null;
}

我希望它有所帮助。很多工作，但行为正是我想要的。 javascript函数的原因是，如果值等于“”，它只是将信息发送到servlet，否则它什么都不做。

另一答案

从一个完全不同的角度......

你为什么把summaryReportController.device.nickname作为autoComplete中的值？

我建议你使用device作为值并指定

• 是
• itemlabel
• 项目值
• 变流器

在您的自动填充中，而您的completeMethod将返回按昵称过滤的设备列表。转换器是javax.faces.convert.Converter的实现。

请参阅PF Showcase中的POJO案例。