Skip to main content

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

Posted by arungupta on August 6, 2008 at 2:57 PM PDT

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

Related Topics >>