Modification is needed for the autoComplete example in Ch 10 of Core JSF

[Himai Minh]

Hi, for your reference, there is something missing in the autoComplete example in Ch 10 of Core JSF book:
In autoComplete.xhtml

<ui:composition>     
      <composite:interface>
        <composite:attribute name="value" required="true"/>
        <composite:attribute name="completionItems" required="true"/>
      </composite:interface> 
      <composite:implementation>
        <h:outputScript library="javascript" 
           name="prototype-1.6.0.2.js" target="head"/>        
        <h:outputScript library="javascript" 
           name="autoComplete.js" target="head"/>
      <h:form> 
        <h:inputText id="input" value="#{cc.attrs.value}" 
           valueChangeListener="#{autocompleteListener.valueChanged}"
           onkeyup="com.corejsf.updateCompletionItems(this, event)"
           onblur="com.corejsf.inputLostFocus(this)">
            //I added this line
           <f:ajax render="output" event="mouseout"/>
        </h:inputText>   
          
        <h:selectOneListbox id="listbox" style="display: none"
           valueChangeListener="#{autocompleteListener.completionItemSelected}"
           onfocus="com.corejsf.listboxGainedFocus()">
        
          <f:selectItems value="#{cc.attrs.completionItems}"/>
          <f:ajax render="input"/>
          
        </h:selectOneListbox>
        <br></br>
         //I added this line
        <p><h:outputText id="output" value = "You selected #{cc.attrs.value}"></h:outputText></p>
        </h:form>
      </composite:implementation>    
    </ui:composition>

I notice the com.corejsf.listboxGainedFocus is missing in the autoComplete.js.
In autoComplete.js , I added this function :

inputLostFocus: function(input) {       
         var hideListbox = function() {
            Element.hide(com.corejsf.getListboxId(input))
         }
      
         focusLostTimeout = window.setTimeout(hideListbox, 200)
      },
getListboxId: function(input) {
         var clientId = new String(input.name)
         var lastIndex = clientId.lastIndexOf(":")
         return clientId.substring(0, lastIndex) + ":listbox"
      },
    

 //  I added this to show the list box 
      listboxGainedFocus : function(input){
    	  var showListbox = function() {
              Element.show(com.corejsf.getListboxId(input))
           }
      }
   } 

The output is in the attached diagram.
Right now, when you move your mouse out of the input box, your city selection is displayed.