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

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