When using AutoSuggestBehavior for a UI Component, the auto suggest list is displayed as soon as the user starts typing in the field. In this article, we will find how to restrict the autosuggest list to be displayed till the user types in couple of characters.

This would be more useful in the low latency networks and also the autosuggest list is bigger. We could display a static message to let the user know that they need to type in more characters to get a list for picking a value from. Final output we would expect is like the below image

Lets see how we can implement this. Assuming we have an input text for the users to enter the country name and an autosuggest behavior is added to it.

<af:inputText label="Country" id="it1">
                    <af:autoSuggestBehavior />
                </af:inputText>

Also, assuming we have a VO (we'll name it as CountryView for this example), with a view criteria to filter out the VO based on the bind variable passed.

Now, we would generate View Impl class from the java node (including bind variables) and then expose the setter method of the bind variable to client interface.

In the View layer, we would create a tree binding for the VO and the method binding for the setter method of the bind variable exposed above, in the pagedef file

As we've already added an input text and an autosuggestbehavior for the test, we would not need to build the suggested items for the autosuggest list.Let us add a method in the backing bean to return us List of select items to be bound to the autosuggest list.

 padding: 5px; background-color: #fbfbfb; min-height: 40px; width: 544px; height: 168px; overflow: auto;">        public List onSuggest(String searchTerm) {
        ArrayList<SelectItem> selectItems = new ArrayList<SelectItem>();
        if(searchTerm.length()>1) {
        //get access to the binding context and binding container at runtime
        BindingContext bctx = BindingContext.getCurrent();
        BindingContainer bindings = bctx.getCurrentBindingsEntry();
        //set the bind variable value that is used to filter the View Object
        //query of the suggest list. The View Object instance has a View
        //Criteria assigned
        OperationBinding setVariable = (OperationBinding) bindings.get("setBind_CountryName");
        setVariable.getParamsMap().put("value", searchTerm);
        setVariable.execute();
        //the data in the suggest list is queried by a tree binding.
        JUCtrlHierBinding hierBinding = (JUCtrlHierBinding) bindings.get("CountryView1");
                                                                                                                                              
        //re-query the list based on the new bind variable values hierBinding.executeQuery();
        //The rangeSet, the list of queries entries, is of type
        //JUCtrlValueBndingRef.
        List<JUCtrlValueBindingRef> displayDataList = hierBinding.getRangeSet();
        
        for (JUCtrlValueBindingRef displayData : displayDataList){
            Row rw = displayData.getRow();
            //populate the SelectItem list
            selectItems.add(new SelectItem(
            (String)rw.getAttribute("Name"),
            (String)rw.getAttribute("Name")));
            }
        
        }
        else{
            SelectItem a = new SelectItem("","Type in two or more characters..","",true);
            selectItems.add(a);
        }
        return selectItems;
    }

So, what we are doing in the above method is, to check the length of the search term and if it is more than 1 (i.e 2 or more characters), the return the actual suggest list. Otherwise, create a read only select item

new SelectItem("","Type in two or more characters..","",true);

and add it to the list of suggested items to be displayed. The last parameter for the SelectItem (boolean) is to make it as readOnly, so that users would not be able to select this static message from the displayed list.

Finally, bind this method to the input text's autosuggestbehavior's suggestedItems property.

<af:inputText label="Country" id="it1">
        <af:autoSuggestBehavior
              suggestedItems="#{AutoSuggestBean.onSuggest}"/>
 </af:inputText>