wood burning stoves 2.0
The moose likes JSF and the fly likes how to use autocomplete in jsf Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "how to use autocomplete in jsf" Watch "how to use autocomplete in jsf" New topic

how to use autocomplete in jsf

yadi cahyadi

Joined: Jun 27, 2010
Posts: 2
i have problem with autocomplete using jsf + java script, so i want to get information about alternative way,
here we come
maybe your familiar with this tag
<h:inputText id="auto">

in <h:inputText> we can using autocomplete, so the code will be like this
<h:inputText id="auto" autocomplete="">
my question is, how we can use autocomplete in <h:inputText> tag??
please help me to solve this problem, cause i need autocomplete very muchhh
yadi cahyadi

Joined: Jun 27, 2010
Posts: 2
allright, i've found my self the way
ok,let'sshage with you.

first, make jsp file for input data, we can call it, 'inputdata.jsp'
<h:inputText id="auto" value=" "
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">

make jsp file for search data by value from input data, we can call it, 'find.jsp'
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" import="java.util.*, java.lang.*"%>
String id = request.getParameter("queryString");
String q = request.getParameter("id");
try {
String user;
List<String> result = new ArrayList<String>(5);
// untuk pengembangan, isi list akan mengambil dari database
// for real development, list value is come from database which parameter is come from inputdata.jsp
Iterator<String> i = result.listIterator();
user = i.next();
out.println("<li onClick=\"fill('"+user+"');\">"+user+"  </li>\n");
catch(Exception e){

this for the JS, don't forget to include this js in inputdata.jsp
function lookup(inputString,id) {

if(inputString.length == 0) {


} else {

$.post("find.jsp?", {queryString: ""+inputString+"",id:""+id+""}, function(data){

if(data.length >0) {






function fill(thisValue) {


setTimeout("$('#suggestions').hide();", 5);


this for autocomplete css, don't forget to include this css in inputdata.jsp
.autocomplete_list * {
font: 13px "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;

.autocomplete_list {
background: #FEFEFE;
display: block;
border: 1px solid #7C7C7C;
text-align: left; z-index: 200;

.autocomplete_list, .autocomplete_list ol, .autocomplete_list li {
list-style-type: none;
margin: 0;
padding: 0;

.autocomplete_list li {
margin: 0;
text-align: left;
cursor: pointer;
padding: .3em .5em;
border: none;

.autocomplete_list .current_item {
background: #B4D5FE;
color: black;

.autocomplete_list li {
color: #303030;

.autocomplete_list span {
color: #111; float: right; padding-left: 2em;

.autocomplete_icon {
background-image: url(/../images/autocomplete.gif);
cursor: pointer;
cursor: hand;
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 17145

Actually, I just use the RichFaces SuggestionBox control

Should be at http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionbox.jsf . Unfortunately, their server seems to be down this morning.

An IDE is no substitute for an Intelligent Developer.
I agree. Here's the link: http://aspose.com/file-tools
subject: how to use autocomplete in jsf
It's not a secret anymore!