Creating new Auto-Suggest Component

Question

Hi,
I am new to ADF and looking for Auto-Suggest options. Found Franks code and it was really heplful.
We tried to create a new component based on this but not able to use multiple components of the type on the same page/form.The problem we are thinking of is because of the popup having the same id for all the components we embed in.If we attach 3 components of this type to a form then one of the random ones work as per logic and other 2 not doing any pop ups at all.
Could you please help us to resolve this please?
Thanks
Subha
CODE
suggestComponentModel.java
package com.dstintl.ic.ui.component.suggestbox;
import java.util.List;
public interface SuggestComponentModel{
* Method called to filter data shown in the suggest list. Initial
* request is made with inMemory = false. If in memory sorting is
* enabled then all subsequent calls are made passing trues as the
* value for the inMemory parameter. Implementations may decid to
* ignore the inMemory argument and always query the data source.
public List<String> filteredValues(String filterCriteria,
boolean inMemory);
SuggestBoxTag.java+
package com.dstintl.ic.ui.component.suggestbox;
import javax.el.ValueExpression;
import oracle.adf.view.rich.component.rich.fragment.RichDeclarativeComponent;
import oracle.adfinternal.view.faces.taglib.region.RichDeclarativeComponentTag;
import org.apache.myfaces.trinidad.bean.FacesBean;
* ICDateComponent tag class.
public class SuggestBoxTag extends RichDeclarativeComponentTag {
     /*input text properties*/
private ValueExpression styleClass;
private ValueExpression label;
private ValueExpression required;
private ValueExpression displayWidth;
private ValueExpression maximumLength;
private ValueExpression tooltip;
private ValueExpression disabled;
/*popup properties*/
private ValueExpression itemList;
* {@inheritDoc}
@Override
protected String getViewId() {
return "/component/SuggestBox.jspx";
* {@inheritDoc}
@Override
protected RichDeclarativeComponent createComponent() {
return new SuggestBox();
* {@inheritDoc}
@Override
public void release() {
super.release();
label = null;
* {@inheritDoc}
@Override
protected void setProperties(final FacesBean bean) {
super.setProperties(bean);
/*Input text box properties*/
if (label != null) {
bean.setValueExpression(SuggestBox.LABEL_KEY, label);
if (styleClass != null) {
bean.setValueExpression(SuggestBox.STYLE_CLASS_KEY, styleClass);
if (required != null) {
bean.setValueExpression(SuggestBox.REQUIRED_KEY, required);
if (displayWidth != null) {
bean.setValueExpression(SuggestBox.DISPLAY_WIDTH_KEY, displayWidth);
if (maximumLength != null) {
bean.setValueExpression(SuggestBox.MAXIMUM_LENGTH_KEY, maximumLength);
if (tooltip != null) {
bean.setValueExpression(SuggestBox.TOOLTIP_KEY, tooltip);
if (disabled != null) {
bean.setValueExpression(SuggestBox.DISABLED_KEY, disabled);
if (itemList != null) {
bean.setValueExpression(SuggestBox.POPUP_SELECTITEMLIST_KEY, itemList);
* @return label
public ValueExpression getLabel() {
return label;
* @param label
* label
public void setLabel(ValueExpression label) {
this.label = label;
* @return style class.
public ValueExpression getStyleClass() {
return styleClass;
* @param styleClass
* style class.
public void setStyleClass(ValueExpression styleClass) {
this.styleClass = styleClass;
* @param required
* required.
     public void setrequired(ValueExpression required) {
          this.required = required;
* @return required .
     public ValueExpression getrequired() {
          return required;
* @param displayWidth
* displayWidth.
     public void setDisplayWidth(ValueExpression displayWidth) {
          this.displayWidth = displayWidth;
* @return displayWidth .
     public ValueExpression getDisplayWidth() {
          return displayWidth;
* @param maximumLength
* maximumLength.
     public void setmaximumLength(ValueExpression maximumLength) {
          this.maximumLength = maximumLength;
* @return maximumLength .
     public ValueExpression getmaximumLength() {
          return maximumLength;
* @param tooltip
* tooltip.
     public void setTooltip(ValueExpression tooltip) {
          this.tooltip = tooltip;
* @return tooltip .
     public ValueExpression getTooltip() {
          return tooltip;
* @param disabled
* disabled.
     public void setDisabled(ValueExpression disabled) {
          this.disabled = disabled;
* @return disabled .
     public ValueExpression getDisabled() {
          return disabled;
* @param itemList
* itemList.
     public void setItemList(ValueExpression itemList) {
          this.itemList = itemList;
* @return itemList .
     public ValueExpression getItemList() {
          return itemList;
SuggestBox.java+
package com.dstintl.ic.ui.component.suggestbox;
import java.util.ArrayList;
import java.util.List;
import javax.faces.component.UIComponent;
import javax.faces.model.SelectItem;
import oracle.adf.view.rich.component.rich.fragment.RichDeclarativeComponent;
import oracle.adf.view.rich.component.rich.input.RichSelectOneListbox;
import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.render.ClientEvent;
import org.apache.myfaces.trinidad.bean.PropertyKey;
* suggestBox.
public class SuggestBox extends RichDeclarativeComponent {
/** label. **/
public static final PropertyKey LABEL_KEY = PropertyKey.createPropertyKey("label");
/** styleClass **/
public static final PropertyKey STYLE_CLASS_KEY = PropertyKey.createPropertyKey("styleClass");
/** required **/
public static final PropertyKey REQUIRED_KEY = PropertyKey.createPropertyKey("required");
/** displayWidth **/
public static final PropertyKey DISPLAY_WIDTH_KEY = PropertyKey.createPropertyKey("displayWidth");
/** precision **/
public static final PropertyKey MAXIMUM_LENGTH_KEY = PropertyKey.createPropertyKey("maximumLength");
/** toolTip **/
public static final PropertyKey TOOLTIP_KEY = PropertyKey.createPropertyKey("tooltip");
/**disabled **/
public static final PropertyKey DISABLED_KEY = PropertyKey.createPropertyKey("disabled");
/** itemList **/
public static final PropertyKey POPUP_SELECTITEMLIST_KEY = PropertyKey.createPropertyKey("itemList");
* Constructor.
public SuggestBox() {
* Gets the value set to the <code>label</code> attribute.
* @return String label.
public String getLabel() {
String t = (String) getAttributes().get("label");
return t;
* Gets the value set to the <code>styleClass</code> attribute.
* @return String styleClass.
public String getStyleClass() {
String t = (String) getAttributes().get("styleClass");
return t;
* Gets the value set to the <code>required</code> attribute.
* @return b.
public boolean getrequired() {
Boolean b = (Boolean) getAttributes().get("required");
return b;
* Gets the value set to the <code>displayWidth</code> attribute.
* @return String displayWidth.
public String getDisplayWidth() {
String t = (String) getAttributes().get("displayWidth");
return t;
* Gets the value set to the <code>precision</code> attribute.
* @return String precision.
public String getMaximumLength() {
String t = (String) getAttributes().get("maximumLength");
return t;
* Gets the value set to the <code>toolTip</code> attribute.
* @return String styleClass.
public String getToolTip() {
String t = (String) getAttributes().get("tooltip");
return t;
* Gets the value set to the <code>disabled</code> attribute.
* @return b.
public boolean getDisabled() {
Boolean b = (Boolean) getAttributes().get("disabled");
return b;
* Main popUp functionality.
     /**Get popUpId label */
private String popUpLabel;
public void setPopUpLabel(String popUpLabel) {
          this.popUpLabel = popUpLabel;
     public String getPopUpLabel() {
          this.popUpLabel =(String) getAttributes().get("label");
          return popUpLabel;
/** fullitemList from the binding **/
private List<SelectItem> fullitemList;
/** suggestedList - to populate list of suggestions squeezed from the fullitemList **/
private List<SelectItem> suggestedList = new ArrayList<SelectItem>();
/** suggestListBox - attached to the Main popUp RichSelectOneListbox**/
private RichSelectOneListbox suggestListBox;
* sets suggestListBox
     public void setSuggestListBox(RichSelectOneListbox suggestListBox) {
          this.suggestListBox = suggestListBox;
* gets suggestListBox
* @return suggestListBox
     public RichSelectOneListbox getSuggestListBox() {
          return suggestListBox;
* Sets suggested list on the selectOneListbox component
* @param suggestedList
* suggestedList.
     public void setSuggestedList(List<SelectItem> suggestedList) {
          this.suggestedList = suggestedList;
* Retrieves the list from the bindings and
* initialise suggestedList with the full list(only done during initialisation)
* @return suggestedList.
     public List<SelectItem> getSuggestedList() {
          if(fullitemList == null){
               fullitemList = new ArrayList<SelectItem>();
     List<SelectItem> result = (List<SelectItem>) getAttributes().get("itemList");
     this.fullitemList.addAll(result);
     this.suggestedList.addAll(result);
          return suggestedList;
* doFilterList - On Every user keystroke in the suggest input field, the browser client calls
* the doFilterList method through the af:serverListerner component
* af:selectoneListbox (popup) is refreshed at the end of each call to the doFileterList so that
* new list value is populated.
* @param clientEvent
public void doFilterList(ClientEvent clientEvent) {
     if(suggestListBox == null) {
          UIComponent uic = clientEvent.getComponent();
          suggestListBox = (RichSelectOneListbox) uic.getChildren().get(0);
// set the content for the suggest list
String srchString = (String)clientEvent.getParameters().get("filterString");
this.suggestedList.clear();
for(SelectItem item : fullitemList) {
     if( item.getLabel().contains(srchString)){
     this.suggestedList.add(item);
AdfFacesContext.getCurrentInstance().addPartialTarget(suggestListBox);
SuggestBox.jspx+
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
     <jsp:directive.page contentType="text/html;charset=windows-1252" />
     <af:componentDef var="attrs" componentVar="component">
<af:document>
<f:facet name="metaContainer">
<af:group>
<![CDATA[
<script>
function handleKeyUpOnSuggestField(evt){
// start the popup aligned to the component that launched it
suggestPopup = evt.getSource().findComponent("suggestPopup");
inputField = evt.getSource();
//don't open when user "tabs" into field
if (suggestPopup.isShowing() == false &&
evt.getKeyCode()!= AdfKeyStroke.TAB_KEY){
hints = {align:AdfRichPopup.ALIGN_AFTER_START, alignId:evt.getSource().getClientId()+"::content"};
suggestPopup.show(hints);
//disable popup hide to avoid popup to flicker on
//key press
suggestPopup.hide = function(){}
//suppress server access for the following keys
//for better performance
if (evt.getKeyCode() == AdfKeyStroke.ARROWLEFT_KEY ||
evt.getKeyCode() == AdfKeyStroke.ARROWRIGHT_KEY ||
evt.getKeyCode() == AdfKeyStroke.ARROWDOWN_KEY ||
evt.getKeyCode() == AdfKeyStroke.SHIFT_MASK ||
evt.getKeyCode() == AdfKeyStroke.END_KEY ||
evt.getKeyCode() == AdfKeyStroke.ALT_KEY ||
evt.getKeyCode() == AdfKeyStroke.HOME_KEY) {
return false;
if (evt.getKeyCode() == AdfKeyStroke.ESC_KEY){
hidePopup(evt);
return false;
// get the user typed values
valueStr = inputField.getSubmittedValue();
// query suggest list on the server
AdfCustomEvent.queue(suggestPopup,"suggestServerListener",
// Send single parameter
{filterString:valueStr},true);
// put focus back to the input text field
setTimeout("inputField.focus();",400);
//TAB and ARROW DOWN keys navigate to the suggest popup
//we need to handle this in the key down event as otherwise
//the TAB doesn't work
function handleKeyDownOnSuggestField(evt){               
if (evt.getKeyCode() == AdfKeyStroke.ARROWDOWN_KEY) {                   
selectList = evt.getSource().findComponent("suggestListBox");
selectList.focus();
return false;
else{
return false;
//method called when pressing a key or a mouse button
//on the list
function handleListSelection(evt){
if(evt.getKeyCode() == AdfKeyStroke.ENTER_KEY ||
evt.getType() == AdfUIInputEvent.CLICK_EVENT_TYPE){                                          
var list = evt.getSource();
evt.cancel();
var listValue = list.getProperty("value");
hidePopup(evt);
inputField = evt.getSource().findComponent("suggestField");
inputField.setValue(listValue);
//cancel dialog
else if (evt.getKeyCode() == AdfKeyStroke.ESC_KEY){
hidePopup(evt);
//function that re-implements the node functionality for the
//popup to then call it
function hidePopup(evt){
var suggestPopup = evt.getSource().findComponent("suggestPopup");
//re-implement close functionality
suggestPopup.hide = AdfRichPopup.prototype.hide;
suggestPopup.hide();
</script>
]]>
</af:group>
</f:facet>
<af:messages/>
</af:document>
     <!-- START Suggest Field -->
     <af:inputText id="suggestField"
     clientComponent="true"
     disabled="#{attrs.disabled}"
     label="#{attrs.label}"
     required="#{attrs.required}"
     columns="#{attrs.displayWidth}"
     maximumLength="#{attrs.maximumLength}"
     styleClass="#{attrs.styleClass}"
     shortDesc="#{attrs.tooltip}">
     <af:clientListener method="handleKeyUpOnSuggestField"
                         type="keyUp"/>
     <af:clientListener method="handleKeyDownOnSuggestField"
     type="keyDown"/>
     </af:inputText>
     <!-- END Suggest Field -->
     <!-- START Suggest popUp -->
<af:popup id="suggestPopup" contentDelivery="immediate" animate="false" clientComponent="true" >
     <af:selectOneListbox id="suggestListBox" contentStyle="width: 250px;"
     size="5" valuePassThru="true">
     <f:selectItems value="#{component.suggestedList}"/>
     <af:clientListener method="handleListSelection" type="keyUp"/>
     <af:clientListener method="handleListSelection" type="click"/>
     </af:selectOneListbox>
     <af:serverListener type="suggestServerListener"
     method="#{component.doFilterList}"/>
</af:popup>
     <!-- END Suggest popUp -->
<af:xmlContent>
               <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>suggestBox</display-name>
<attribute>
<attribute-name>id</attribute-name>
</attribute>
                    <attribute>
<attribute-name>label</attribute-name>
</attribute>
<component-extension>
<component-tag-namespace>com.dstintl.ic.ui.component</component-tag-namespace>
<component-taglib-uri>/com/dstintl/ic/ui/component</component-taglib-uri>
</component-extension>
</component>
</af:xmlContent>
</af:componentDef>
</jsp:root>
component.tld+
<?xml version="1.0" encoding="windows-1252"?>
<taglib xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" version="2.1" xmlns="http://java.sun.com/xml/ns/javaee">
     <display-name>component</display-name>
     <tlib-version>1.0</tlib-version>
     <short-name>component</short-name>
     <uri>/com/dstintl/ic/ui/component</uri>
     <!--
          Component Name: SuggestBox Description: AutoSuggest or AutoComplete - shows a list of vales
          in a drop down list that is filtered by the user input in the input text field.
     -->
     <tag>
          <name>SuggestBox</name>
          <tag-class>com.dstintl.ic.ui.component.suggestbox.SuggestBoxTag</tag-class>
          <body-content>JSP</body-content>
          <attribute>
               <name>label</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>styleClass</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>disabled</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>required</name>
               <required>false</required>
               <deferred-value>
                    <type>boolean</type>
               </deferred-value>
          </attribute>
          <attribute>
               <name>displayWidth</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>maximumLength</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>tooltip</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
          <attribute>
               <name>itemList</name>
               <required>false</required>
               <deferred-value/>
          </attribute>
     </tag>
</taglib>

Answer 1

Hi Subha,
you can distinct the different components using clientAttribute tag with clientListener
<af:inputText id="suggestField" .....>
<af:clientListener method="handleKeyUpOnSuggestField" type="keyUp"/>
<af:clientListener ......"/>
<af:*clientAttribute* name="eventName" value="myCustomEvent"/>
<af:*clientAttribute* name="popupId" value="......"/>
</af:inputText>
in javascript you get the eventName or PopuId from the attribute
component = event.getSource();
var eventName = component.*getProperty* ("eventName");
// Call the server
AdfCustomEvent.queue(popup, *eventName*, ......);
var popupId = component.*getProperty* ("popuId");
var popup = AdfPage.PAGE.findComponent(popupId);
Hope this help,
Maroun