Search code examples
jsfjsf-2primefaces

Reset value to null in primefaces autocomplete event


I have an autocomplete event that fires correctly once a value is selected. I want another event to fire once I erase the value in the textbox and reset the value to null. I was thinking of using the onChange attribute but I was having issues so I reverted back to my original code.

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

Solution

  • When you modify the text content of the AutoComplete textfield, the search method (aka. completeMethod) will be called on the backing bean. You can reset the value to null there if you get an empty string.

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

    Note that I used Apache Commons StringUtils.isBlank(String) to check if the string was null or did only contain whitespace characters.

    JSF View

    In your XHTML file you probably want to listen to any Ajax event to update your view -- or you figure out the event you need (blur, change, whatever) yourself:

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

    I hope this helps.


    An alternative could be something like a "clear" or "reset" button next to the search textfield to make it clear to the user that the value will be cleared.