TOTD #40: jQuery Autcomplete widget with MySQL, GlassFish, NetBeans

href="http://blogs.sun.com/arungupta/entry/totd_39_prototype_script_aculo">TOTD
#39 explained how to create an Autocomplete widget
(server-powered autocompleting of text fields, similar to href="http://www.google.com/webhp?complete=1&hl=en">Google
Suggest) using Prototype/Script.aculo.us libraries
with NetBeans, href="http://glassfish.org">GlassFish and href="http://mysql.org">MySQL. This style="font-weight: bold;">Tip style="font-weight: bold;">Of style="font-weight: bold;">The style="font-weight: bold;">Day (TOTD) builds
upon that project and shows how same functionality can be achieved
using jQuery
Library.

1. Use the NetBeans project created in href="http://blogs.sun.com/arungupta/entry/totd_39_prototype_script_aculo">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 href="http://docs.jquery.com/Downloading_jQuery">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 href="http://nodstrum.com/2007/09/19/autocompleter/">AjaxCompleter
   Tutorial, replace <script> tags in "index2.jsp"
   with the following code fragment:
   
   
   
   style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
   cellpadding="2" cellspacing="2">
          
   <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:



src="http://blogs.sun.com/arungupta/resource/images/jquery-autocomplete-output-a.png">



src="http://blogs.sun.com/arungupta/resource/images/jquery-autocomplete-output-mi.png">



Please leave suggestions on other TOTD (Tip Of The Day) that
you'd like to see.
A complete archive of all tips is available href="http://blogs.sun.com/arungupta/tags/totd">here.




Technorati: totd
mysql href="http://technorati.com/tag/jpa">jpa href="http://technorati.com/tag/persistenceunit">persistenceunit
netbeans
glassfish
jquery
autocomplete