aspose file tools
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
Author

how to use autocomplete in jsf

yadi cahyadi
Greenhorn

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
thhxxxx
yadi cahyadi
Greenhorn

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=" "
onkeyup="lookup(this.value,'');"
styleClass="inputString">
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</h:inputText>
.....

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");
response.setContentType("text/html");
response.setHeader("Cache-Control","no-cache");
try {
String user;
List<String> result = new ArrayList<String>(5);
result.add("Yadi");
result.add("Andi");
result.add("Herlina");
result.add("Wulan");
// 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();
while(i.hasNext()){
user = i.next();
out.println("<li onClick=\"fill('"+user+"');\">"+user+"  </li>\n");
}
}
catch(Exception e){
response.getWriter().println(e);
}
%>

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

if(inputString.length == 0) {

$('#suggestions').hide();

} else {

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

if(data.length >0) {

$('#suggestions').show();

$('#autoSuggestionsList').html(data);

}

});

}

}
function fill(thisValue) {

$('.inputString').val(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: 16540
    
  25

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.


Customer surveys are for companies who didn't pay proper attention to begin with.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: how to use autocomplete in jsf