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

问题描述 投票:5回答:4

我有一个自动完成事件,一旦选择了值,就会正确触发。我删除文本框中的值并将值重置为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();
}
jsf jsf-2 primefaces
4个回答
4
投票

修改自动完成文本字段的文本内容时,将在辅助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>

我希望这有帮助。


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


4
投票

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

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

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

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

要么:

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

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

1
投票

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

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,否则它什么都不做。


0
投票

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

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

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

  • itemlabel
  • 项目值
  • 变流器

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

请参阅PF Showcase中的POJO案例。

© www.soinside.com 2019 - 2024. All rights reserved.