TOTD
#39 explained how to create an Autocomplete widget
(server-powered autocompleting of text fields, similar to Google
Suggest) using Prototype/Script.aculo.us libraries
with NetBeans, GlassFish and MySQL. This Tip Of The Day (TOTD) builds
upon that project and shows how same functionality can be achieved
using jQuery
Library.

1. Use the NetBeans project created in TOTD
   #39. Right-clicking on the project, select "New", "JSP...",
   enter the name as "index2" and click on "Finish".
2. Download jquery JavaScript library from here
   (1.2.6 (minified) as of this writing) and copy into the "javascripts"
   folder of your NetBeans project.
3. Copy contents from "index.jsp" into "index2.jsp".
4. Borrowing the code from AjaxCompleter
   Tutorial, replace <script> tags in "index2.jsp"
   with the following code fragment:
   
   
   

          
   <script src="javascripts/jquery-1.2.6.min.js"
   type="text/javascript"></script>
   
          
   <script type="text/javascript">
   
              
   function autocomplete(autocomplete) {
   
                  
   if (autocomplete.length == 0) {
   
                      
   $('#autocomplete_choices').hide();
   
                  
   } else {
   
                      
   $.post("/Autocomplete/StatesServlet", { autocomplete_parameter: "" +
   autocomplete + ""},
   
                          
   function(data) {
   
                              
   if (data.length > 0) {
   
                                  
   $('#autocomplete_choices').show();
   
                                  
   $('#autocomplete_choices').html(data);
   
                              
   }
   
                          
   });
   
                  
   }
   
              
   }
   
          
   </script>

   
   

And here are couple of output screenshots:











Please leave suggestions on other TOTD (Tip Of The Day) that
you'd like to see.
A complete archive of all tips is available here.




Technorati: totd
mysql jpa persistenceunit
netbeans
glassfish
jquery
autocomplete