File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
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 =;
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: 17417

Actually, I just use the RichFaces SuggestionBox control

Should be at . Unfortunately, their server seems to be down this morning.

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