File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes JSF and the fly likes jQuery auto complete with jsf Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "jQuery auto complete with jsf" Watch "jQuery auto complete with jsf" New topic

jQuery auto complete with jsf

pradeep gamage
Ranch Hand

Joined: Aug 03, 2009
Posts: 85

i have developed jquery autocomplete with jsf and it's working fine. but when i add h:form it's not working

this is my code. /* auto complete */

with above code autocomplete is working fine... but when i put h:inputbox inside h:form it's not working. without putting it in h:form i will not able to submit it's value to jsf backing bean. please give me valuable idea to get this correct. Thanks in advance

Software Engineer(BSC):SCJP 1.5
(Knowledge is power when applied)
pradeep gamage
Ranch Hand

Joined: Aug 03, 2009
Posts: 85

I inserted h:inputHidden and set it to value using java script. then its working as i want.
this is my code

<h:inputText id="tags" required="true" requiredMessage="#{msgs.requireMassage}"/>
<h:form id="watchListForm">
<h:inputHidden id="ttt" value="#{watchListBean.symbolName}"/>
<h:commandButton action="#{watchListBean.addtowatchList}" value="ADD TO WATCH LIST" onclick="document.getElementById('watchListForm:ttt').value = document.getElementById('tags').value">

sanju baba

Joined: Jul 31, 2007
Posts: 1
Hi Pradeep,

I am not able to use the code snippet that you have shared above. Both cases are not working. I am copying my JSP content here:-
<%@ page language="java" contentType="text/html;charset=UTF-8"%>

<%@ taglib prefix="f" uri=""%>
<%@ taglib prefix="h" uri=""%>

<link type="text/css" rel="stylesheet" media="projection, screen, print" href="js/jquery-ui-1.8.17.custom.css" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.autocomplete.js"></script>

$(function() {
var availableTags = [
$( "tags" ).autocomplete({
source: availableTags
$( "#html" ).autocomplete({
source: availableTags

<label for="tags">JSF Autocomplete: </label>
<h:inputText id="tags" />

<label for="tags">HTML Autocomplete: </label>
<input type="text" id="html">


Please note that it is working fine with HTML text box with id HTML and not working with JSF input box with id tags. Looking for your further input as it is a bit urgent.

pradeep gamage
Ranch Hand

Joined: Aug 03, 2009
Posts: 85

if you put h:inputbox inside the h:form auto complete will not work. so you have to put h:inputbox outside of h:form and get that value by javascript and assign to h:hiddeninput textbox. then your autocomplete will work.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 17417

Helpful hint: Look up above the text input area in our message editor and you'll see a button labelled "Code". You can use this button to generate code tags around preformatted data such as Java source or XML. It makes things a lot easier to read.

Don't use the "$" notation on jQuery on JSF. The "$" means things to the EL processor that you don't want it to mean. Use the long-form alternative ("jQuery.") instead.

In JSF, there is now a lot of support for AJAX. JSF2 includes an ajax tag in the core tagset. Many of the extension tagsets such as RichFaces, IceFaces, PrimeFaces, and so forth provide AJAX support as well. I use the autocomplete function in RichFaces extensively. If you use JSF's AJAX features, you may find that you will have to write little JavaScript, if any. JSF will write the JavaScript for you. In in some cases, it will even write jQuery code for you!

An IDE is no substitute for an Intelligent Developer.
I agree. Here's the link:
subject: jQuery auto complete with jsf
It's not a secret anymore!