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.
- 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”.
- Download jquery JavaScript library from here (1.2.6 (minified) as of this writing) and copy into the “javascripts” folder of your NetBeans project.
- Copy contents from “index.jsp” into “index2.jsp”.
- 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
- TOTD #39: Prototype/Script.aculo.us Autcomplete widget with MySQL, GlassFish, NetBeans
- TOTD #38: Creating a MySQL Persistence Unit using NetBeans IDE
- TOTD #20: How to create a new jMaki widget ?
- TOTD #60: Configure MySQL 6.0.x-alpha to NetBeans 6.5
- TOTD #50: Mojarra 2.0 EDR2 is now available – Try them with GlassFish v3 and NetBeans 6.5