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>
