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>
