在 primefaces 自动完成事件中将值重置为 null

Question

我有一个自动完成事件，一旦选择了一个值，就会正确触发。我希望在删除文本框中的值并将值重置为空后触发另一个事件。我正在考虑使用 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();
}

Answer 1

当您修改 AutoComplete 文本字段的文本内容时，将在支持 bean 上调用搜索方法（aka.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>

我希望这会有所帮助。

---

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

Answer 2

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

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

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

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

或者：

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

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

Answer 3

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

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);
    }

}

在 myViewScopedBean 中：

public void setValueNull() {
    selectedValue = null;
}

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

Answer 4

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

为什么在 autoComplete 中有 summaryReportController.device.nickname 作为值？

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

• 变量
• 项目标签
• itemValue
• 转换器

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

请参阅PF Showcase 中的 POJO 案例。