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: 16305
    
  21

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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: how to use autocomplete in jsf