<input type="text"
          size="20"
          autocomplete="off"
          id="complete-field"
                      name="id"
          onkeyup="doCompletion();">

   function initRequest(url) {
       if (window.XMLHttpRequest) {
           return new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           isIE = true;
           return new ActiveXObject("Microsoft.XMLHTTP");
       }
   }

   function doCompletion() {
       if (completeField.value == "") {
           clearTable();
       } else {
           var url = "autocomplete?action=complete&id=" + 
                   escape(completeField.value);
           var req = initRequest(url);
           req.onreadystatechange = function() {
               if (req.readyState == 4) {
                   if (req.status == 200) {
                       parseMessages(req.responseXML);
                   } else if (req.status == 204){
                       clearTable();
                   }
               }
           };
           req.open("GET", url, true);
           req.send(null);
       }
   }

• URL autocomplete 및 전체 필드(complete-field)의 텍스트(M 문자):
  

       var url = "autocomplete?action=complete&id=" + 
               escape(completeField.value);
  

• GET(HTTP 인터랙션이 GET 메소드를 사용함을 의미) 및 true(인터랙션이 비동기적임을 의미):
  

       req.open("GET", url, true);
  

   public void doGet(HttpServletRequest request, 
           HttpServletResponse response) 
        throws IOException, ServletException { 
       ... 
       String targetId = request.getParameter("id"); 
       Iterator it = employees.keySet().iterator(); 
       while (it.hasNext()) { 
           EmployeeBean e = (EmployeeBean)employees.get(
                   (String)it.next()); 
           if ((e.getFirstName().toLowerCase().startsWith(targetId) || 
              e.getLastName().toLowerCase().startsWith(targetId)) 
              && !targetId.equals("")) { 
              sb.append("<employee>"); 
              sb.append("<id>" + e.getId() + "</id>"); 
              sb.append("<firstName>" + e.getFirstName() + 
                      "</firstName>"); 
              sb.append("<lastName>" + e.getLastName() + 
                      "</lastName>"); 
              sb.append("</employee>"); 
              namesAdded = true; 
           } 
       } 
       if (namesAdded) { 
           response.setContentType("text/xml"); 
           response.setHeader("Cache-Control", "no-cache"); 
           response.getWriter().write("<employees>" + 
                   sb.toString() + "</employees>"); 
       } else { 
           response.setStatus(HttpServletResponse.SC_NO_CONTENT); 
       } 
    }

   <employees>
      <employee>
        <id>3</id>
        <firstName>George</firstName>
        <lastName>Murphy</lastName>
      </employee>
      <employee>
        <id>2</id>
        <firstName>Greg</firstName>
        <lastName>Murphy</lastName>
      </employee>
      <employee>
        <id>11</id><firstName>Cindy</firstName>
        <lastName>Murphy</lastName>
        </employee>
      <employee>
        <id>4</id>
        <firstName>George</firstName>
        <lastName>Murray</lastName>
      </employee>
      <employee>
        <id>1</id>
        <firstName>Greg</firstName>
        <lastName>Murray</lastName>
     </employee>
   </employees>

   function parseMessages(responseXML) {
       clearTable();
           var employees = responseXML.getElementsByTagName(
                   "employees")[0];
       if (employees.childNodes.length > 0) {
           completeTable.setAttribute("bordercolor", "black");
           completeTable.setAttribute("border", "1");
       } else {
           clearTable();
       }
    
       for (loop = 0; loop < employees.childNodes.length; loop++) {
           var employee = employees.childNodes[loop];
           var firstName = employee.getElementsByTagName(
                   "firstName")[0];
           var lastName = employee.getElementsByTagName(
                   "lastName")[0];
           var employeeId = employee.getElementsByTagName(
                   "id")[0];
           appendEmployee(
                   firstName.childNodes[0].nodeValue,
                   lastName.childNodes[0].nodeValue, 
                   employeeId.childNodes[0].nodeValue);
       }
   }

   <div "position: absolute; 
      top:170px;left:140px" id="menu-popup">

1. 먼저 GlassFish Project 페이지(영문)에서 GlassFish를 다운로드해야 하는데, GlassFish는 Servlet 2.5와 JSTL(JSP Standard Tag Library)을 곧바로 지원한다. 만약 J2EE 1.4 또는 Servlet 2.4 컨테이너를 사용하고 있다면 JSTL JAR 파일을 web/WEB-INF/lib 디렉터리에 포함시켜야 할 수도 있다.
2. 다음의 환경 변수를 설정한다.
   • GLASSFISH_HOME. This should point to where you installed GlassFish (for example C:\Sun\AppServer) GLASSFISH_HOME. GlassFish 설치 장소를 가리켜야 한다(가령 C:\Sun\AppServer).
     
   • ANT_HOME. ant 설치 장소를 가리켜야 한다. ant는 다운로드한 GlassFish 번들에 포함되어 있다. (Windows의 경우에는 lib\ant 서브디렉터리 내에 위치함.)
     
   • JAVA_HOME. 시스템에서의 JDK 5.0 위치를 가리켜야 한다.
     
   
   아울러, ant 위치를 PATH 환경 변수에 추가한다.
   
   
3. 예제 파일을 다운로드하여 압축을 해제한다. 이제 새로 추출된 디렉터리가 <install_dir>\ajax-autocomplete로 표시되어야 하는데, 예를 들어 Windows 컴퓨터의 C:\에 압축을 풀었다면 새로 생성된 디렉터리는 C:\ajax-autocomplete가 되어야 한다
   
   
4. ajax-autocomplete 디렉터리로 이동해서 build.properties 파일에 build.properties.sample을 복사한다.
   
   
5. build.properties 파일을 열고 Servlet 2.4 이상의 API를 포함하는 JAR 파일에 servlet.jar 속성을 설정한다. GlassFish의 경우 JAR 파일은 <gf_install_dir>/glassfish/lib/javaee.jar인데, 여기서 <gf_install_dir>은 GlassFish가 설치된 곳이다. javaee.autodeploy를 웹 컨테이너가 애플리케이션을 자동 설치할 디렉터리로 설정한다. GlassFish의 경우 이 디렉터리는 <gf_install_dir>/glassfish/domains/domain1/autodeploy이다.
   
   
6. 6. 다음 명령어를 입력하여 GlassFish를 시작한다.

   <GF_install_dir>\bin\asadmin start-domain domain1
   

   이 때, <GFinstall_dir>은 Glassfish가 설치된 디렉터리이다.
   
   
7. ant 툴을 이용하여 애플리케이션을 구축하고 설치한다. Glassfish는 /glassfish/bin/asant 디렉터리에 ant의 사본을 가지고 있고, 또한 Apache Ant Project 페이지(영문)에서 ant를 다운로드할 수도 있다.
   
   애플리케이션을 구축하려면 다음 명령어를 입력한다.

         ant
   

   애플리케이션을 설치하려면 다음 명령어를 입력한다.

         ant deploy
   

8. 브라우저를 다음의 URL로 연다: http://localhost:8080/ajax-autocomplete/.
   
   NetBeans 4.1 이상을 사용하고 있다면 예제가 포함되어 있을 것이고, Help -> BluePrints Solutions Catalog를 선택하여 툴에서 이를 실행할 수 있다. 여기서 AJAX -> Autocomplete 예제를 선택하면 된다. 이제 NetBeans 내에서 예제를 실행할 수 있으며 원할 경우 수정도 가능하다.
   
   예제를 실행하면 다음과 같은 모습이 된다.
   
   
   목록의 이름을 클릭하면 종업원에 관한 정보가 표시된다.