jQuery auto complete with jsf

[pradeep gamage]

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 */
$(function() { var availableTags = #{instrumentBean.instrumentList}; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> <div class="ui-widget"> <label for="tags">Symbol: </label> <h:inputText id="tags" /> <h:form id="watchListForm"> <h:commandButton action="#{watchListBean.addtowatchList}" value="ADD TO WATCH LIST" > </h:commandButton> </h:form>

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

[pradeep gamage]

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">
</h:commandButton>
</h:form>

[sanju baba]

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="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<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>

<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "tags" ).autocomplete({
source: availableTags
});
$( "#html" ).autocomplete({
source: availableTags
});
});
</script>

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

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

</f:view>


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.

Thanks,
Sanjeev

[pradeep gamage]

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]

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!