Skip to main content

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

Posted by arungupta on August 6, 2008 at 3:05 PM PDT

#39 explained how to create an Autocomplete widget
(server-powered autocompleting of text fields, similar to href="">Google
Suggest) using Prototype/ libraries
with NetBeans, href="">GlassFish and href="">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

  1. Use the NetBeans project created in href="">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="">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="">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"

    <script type="text/javascript">

    function autocomplete(autocomplete) {

    if (autocomplete.length == 0) {


    } else {

    $.post("/Autocomplete/StatesServlet", { autocomplete_parameter: "" +
    autocomplete + ""},

    function(data) {

    if (data.length > 0) {








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 href="">here.

Technorati: totd
mysql href="">jpa href="">persistenceunit

Related Topics >>