Autocomplete page does not come out

Hi.. I am a beginner in jsf right now I'm having this problem with an autocomplete text field.

This is My Page where I want the autocomplete box appear

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<f:view>

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=8" />
      <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
      <link rel="stylesheet" href="css/button.css" type="text/css" media="screen" title="no title" charset="utf-8">
      
      <title>Automated Export Documentation System</title>
      <script type="text/javascript" src="js/inputChecker.js"></script>
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
     <script type="text/javascript">
                  
 function loadUser(param2,str2) {
                    if (str2=="") {
                        document.getElementById("txtUserList").innerHTML="";
                        return;
                    }
                    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                    }
                    else {// code for IE6, IE5
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function()
                    {
                        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                            if(param2 == 'paramUser'){
                                alert(xml);
                                document.getElementById("txtUserList").innerHTML=xmlhttp.responseText;
                            }
                        }
                    }
                   
                    xmlhttp.open("GET","userList.jsf?"+param2+"="+str2,true);
                    xmlhttp.send();
                }

function selectUser(username){
                        document.getElementById("txtUserList").innerHTML = "";
                    document.getElementById("auditTrailReportForm:log_user_name").value= username;
                }
      </script>
      <style>
        .footerDataTable {
          text-align: right;
        }
      </style>
      
    </head>

<body >
      <div id="headerBg"><jsp:include page="aedsHeader.jsp"/></div>
      <div id="navigationBg">
        <f:subview id="menu">
          <h:form>
            <h:commandLink styleClass="menu" value="Home" action="home" />
            <h:commandLink styleClass="menu" value="Export Declaration" action="#{SADMainInitial.load_sad}" rendered="#{CheckValidUser.prof_code=='003' || CheckValidUser.prof_code=='004' || CheckValidUser.prof_code=='001' || CheckValidUser.prof_code=='009' || CheckValidUser.prof_code=='010' || CheckValidUser.prof_code=='011' || CheckValidUser.prof_code=='012' || CheckValidUser.prof_code=='013'}"   />
            <h:commandLink styleClass="menu" value="Prepayment Account" action="prepay" />
            <h:commandLink styleClass="menu" value="Report" action="report" />
            <h:commandLink styleClass="menu" value="LOE" action="manage_peza" rendered="#{CheckValidUser.prof_code=='011'}" />
            <h:commandLink styleClass="menu" value="LOE" action="loeSubmit" rendered="#{CheckValidUser.prof_code=='003'}" />
            <h:commandLink styleClass="menu" value="BOC" action="gatescanned" rendered="#{CheckValidUser.prof_code=='007'}" />
            <h:commandLink styleClass="menu" value="Admin" action="admin"  rendered="#{CheckValidUser.prof_code=='002'}" />
            <h:commandLink styleClass="menu" value="Logout" action="#{LogoutController.logout}" />
          </h:form>
        </f:subview>
      </div>
      <div id="contentBg">
        <center><h1>AUDIT TRAIL REPORT</h1></center>
        <div id="contentwrapper">
          <div id="content" >
              <style>li { list-style-type: none; }</style>
            <h:form id="auditTrailReportForm" enctype="multipart/form-data">
                  <center>
                                  <h:message for="hid_date_from" id="hid_date_from" errorClass="error"/>
                                  <h:message for="hid_date_to" id="hid_date_to" errorClass="error"/>
                                  <h:message for="noexpsel" id="noexpsel" errorClass="error"/>
                  
                    <h:panelGrid columns="2" styleClass="hide_on_print">
					<h:selectOneRadio  id="type" layout="pageDirection"
						onclick="enableThat(this.value);" styleClass="forParams"
						value="#{viewAuditTrailReports.sel}">
                                                <f:selectItem itemValue="ALL" itemLabel="List ALL:" />
                                               <f:selectItem itemValue="Date" itemLabel="Date From:"/>
                                               <f:selectItem itemValue="User" itemLabel="User Login:"/>
					</h:selectOneRadio>

<h:panelGroup>
                                    <f:verbatim><br/></f:verbatim>
			<h:outputText value="<input type=\"text\" id=\"date_from\" name=\"date_from\"  onchange=\"changeValueOf('auditTrailReportForm:date_from',this.value);\"/>" escape="false"/>
                        <h:outputLabel value="Date To:"/> 
                       <h:outputText value="<input type=\"text\" id=\"date_to\" name=\"date_to\"  onchange=\"changeValueOf('auditTrailReportForm:date_to',this.value);\"/>" escape="false"/>
                        <br>
                        <f:verbatim><br/></f:verbatim>
                          <h:outputText value="<input type=\"text\" id=\"log_user_name\" name=\"log_user_name\" onkeypress=\"loadUser('paramUser',this.value);\" onkeyup=\"loadUser('paramUser',this.value);\"/>" escape="false"/>
                        <div id="txtUserList"></div>
                        <input type="text" on>
						</h:panelGroup>
				</h:panelGrid>
				</center>
                                   <f:verbatim><br/></f:verbatim>
                    <center>
                       <h:commandButton action="report" value="Cancel" styleClass="buttons2" />
                       <h:commandButton action="#{viewAuditTrailReports.retrieve}" value="Retrieve" styleClass="buttons2" />
                  </center>
                      <f:verbatim><hr width="90%" style="color: #E3E3E3"></f:verbatim>
                      <div align="center" id="auditraildiv">
                          <h:dataTable value="#{viewAuditTrailReports.aedsaudit}"
                           width="80%"
                           var="item"
                           align="center"
                           cellpadding="1"
                           headerClass="t1"
                           columnClasses="t4"
                           rowClasses="rowstyle1,rowstyle"
                           binding="#{viewAuditTrailReports.dataTable}">

<h:column>
                    <f:facet name="header">
                        <h:outputText value="AEDS PEZA MODULE" escape="false"/>
                    </f:facet>
                    <h:outputText value="#{item.audit_trail_mname}" escape="false"/>
                </h:column>
                <h:column>
                  <f:facet name="header">
                    <h:outputText value="LOG DESCRIPTION" escape="false"/>
                  </f:facet>
                  <h:outputText value="#{item.audit_trail_desc}" />
                </h:column>

<h:column>
                  <f:facet name="header">
                    <h:outputText value="LOGGED USER" escape="false"/>
                  </f:facet>
                  <h:outputText value="#{item.audit_trail_user}"/>
                </h:column>

<h:column>
                  <f:facet name="header">
                    <h:outputText value="DATE" escape="false"/>
                  </f:facet>
                  <h:outputText value="#{item.audit_trail_date}" />
                </h:column>
              </h:dataTable>
                  </div>
                      <iframe id="ifmPrintContents" style="height: 0px; width: 0px; position: absolute; font-size: 8px;font-family: Verdana, Geneva, sans-serif;"></iframe>
                   <center>
                       <h:commandButton onclick="printDiv();" value="Print"/>
                       <h:commandButton action="window.close()" value="Cancel"/>
                  </center>
            </div>
          </div>
        </h:form>
      </div>
      <div id="#footer"><jsp:include page="aedsFooter.jsp"/></div>
    </body>
  </html>
</f:view>

and this is the autocomplete page

<%--
    Document   : UserList
    Created on : Aug 2, 2012
    Author     : carlo
--%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>

<f:view>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=8" />
      <link rel="stylesheet" href="css/styles1.css" type="text/css">
      <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
      <link rel="stylesheet" href="css/button.css" type="text/css" media="screen" title="no title" charset="utf-8">
      
      <title>Automated Export Documentation System - User List</title>
       <style type="text/css">
        .textstyledt {
          font-family:Verdana;
          font-size:11px;
          color: #320032;
          text-transform:none;
        }

.dtCol1{
          word-wrap: break-word;
          max-width: auto;
        }
        .dtCol2{
          word-wrap: break-word;
          max-width: 300px;
        }
      </style>
    </head>
    <body>
          <div>
              <h:form id="userList">
                  <h:dataTable value="#{userController.user_list}" var="user" bgcolor="#F1F1F1" id="datatableUser"
                    headerClass="list-header" rowClasses="list-row" styleClass="list-background" border="1"
                    binding="#{userController.datatable}"
                    columnClasses="dtCol1,dtCol2">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="User" styleClass="textstyledt"/>
                        </f:facet>
                        <h:outputText value="#{user.audit_trail_user}" id="user_name" styleClass="textstyledt"/>
                    </h:column>
                    <h:column>
                          <h:commandLink value="Select" actionListener="#{userController.useItem}" styleClass="textstyledt" onclick="selectUser('#{user.audit_trail_user}');"/>
                    </h:column>
                </h:dataTable>
              </h:form>
          </div>
      <%--</c:if>--%>
    </body>
    </html>
</f:view>

Bean

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package ph.com.aeds.web.ui;

import java.awt.event.ActionEvent;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.context.FacesContext;
import javax.swing.JOptionPane;
import ph.com.aeds.dao.AedspAuditTrailDAO;
import ph.com.aeds.dao.hibernate.AedspAuditTrail;
import ph.com.aeds.svc.SpringHibernateDaoTarget;
import ph.com.aeds.web.common.FacesUtil;
import ph.com.aeds.web.common.ServiceFinder;

/**
 *
 * @author Carlo
 */
public class UserController implements SpringHibernateDaoTarget
{

private AedspAuditTrailDAO aedsDAO = (AedspAuditTrailDAO) ServiceFinder.findBean(DAO_AEDSPAUDITTRAIL);
    private HtmlDataTable datatable;
    private List<AedspAuditTrail> user_list = new ArrayList<AedspAuditTrail>();

{
        try
        {
            selectItems();
        } catch (Exception e){
            e.printStackTrace();
        }
    }

@PostConstruct
    public void selectItems()
    {
        try
        {
        FacesContext ctx = FacesContext.getCurrentInstance();
        String paramUser = FacesUtil.getRequestParameter("paramUser");

if(paramUser != null && paramUser != "" && paramUser.length() > 0)
            {
                user_list = new ArrayList<AedspAuditTrail>();
                List<AedspAuditTrail> list_aedspaudittrail= new ArrayList<AedspAuditTrail>();
                HashMap<String,String> map = new HashMap<String, String>();
                map.put("audit_trail_user", paramUser+"%");
                if(map.size() > 0){
                list_aedspaudittrail = aedsDAO.retrieveByMapEq(map);
                if(list_aedspaudittrail.size() > 0){
                    List<AedspAuditTrail> new_list = new ArrayList<AedspAuditTrail>();
                    AedspAuditTrail _unaeds = new AedspAuditTrail();
                    for(AedspAuditTrail _user: list_aedspaudittrail){
                        _unaeds = new AedspAuditTrail();
                        try{
                            new_list = new ArrayList<AedspAuditTrail>();
                            _unaeds.setAudit_trail_user(_user.getAudit_trail_user());
                                new_list.add(_unaeds);
                        } catch (NullPointerException npe){}
                    }
                    setUser_list(new_list);
                       
                }
                }
            }
        else
        {
              JOptionPane.showMessageDialog(null,"null");
        }
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
    }

public void useItem(ActionEvent event){
        int index = datatable.getRowIndex();
//        System.out.println("index: "+index);
    }
    public AedspAuditTrailDAO getAedsDAO() {
        return aedsDAO;
    }

public void setAedsDAO(AedspAuditTrailDAO aedsDAO) {
        this.aedsDAO = aedsDAO;
    }

public HtmlDataTable getDatatable() {
        return datatable;
    }

public void setDatatable(HtmlDataTable datatable) {
        this.datatable = datatable;
    }

public List<AedspAuditTrail> getUser_list() {
        return user_list;
    }

public void setUser_list(List<AedspAuditTrail> user_list) {
        this.user_list = user_list;
    }

}

and faces-config

any help would be a big thing Thank you.

Ouch! My eyes!

#1 thing to get help is to reduce the amount of stuff you're posting to the minimum required to illustrate the problem. Anything that large requires me to print it out in order to be able to see anything, and I try to keep the number of dead trees to a minimum.

I did notice a couple of superficial things, although they don't directly affect your problem. One is that you should get rid of the "JSP" elements on your View Definition. In JSF2, JSP is deprecated. Also, backing beans are not Controllers. They are Models.

I did notice a couple of superficial things, although they don't directly affect your problem. One is that you should get rid of the "JSP" elements on your View Definition. In JSF2, JSP is deprecated. Also, backing beans are not Controllers. They are Models.

thank you for the info. but can you please be more specific. thank you