• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

how to use autocomplete in jsf

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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;
}
 
Saloon Keeper
Posts: 27752
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is a good answer but there are many few corrections required to make it work:
1. 'inputdata.jsp' is supposed to be 'inputdata.jsf' rather
2. 'inputdata.jsf' should contain this rather:
.......................
<h:inputText id="auto" value="" onkeyup="lookup(this.value,'');" styleClass="inputString" />
<div class="autocomplete_list" id="suggestions" style="display: none;">
      <div class="suggestionList" id="autoSuggestionsList"></div>
</div>
......................
3. As seen above, the class 'suggestionsBox' has be changed to 'autocomplete_list', and thats how it should be
4. css for 'autocomplete_list' should also be:
.autocomplete_list {
 background:#FEFEFE;
 display:block;
 position:absolute;
 border:1px solid #7C7C7C;
 text-align:left;
 box-shadow:2px 2px 3px #aaaaaa;
 overflow:hidden;
 border-radius:0 0 8px 8px;
 z-index:200;
}
5. In the 'find.jsp' file, this is how the parameters should be retrieved and used:
..............................
String q = request.getParameter("queryString");
String id = request.getParameter("id");
..............................
6. 'find.jsp' should be in the same folder as 'inputdata.jsf'
 
Tim Holloway
Saloon Keeper
Posts: 27752
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Actually, I would not trust anything in this thread. At this point it's almost all either wrong or obsolete.

A JSF template 11 years ago would still be possible as a JSP file. However, in JSF 2.2, templates were no longer JSPs, but Facelets xhtml files.

The best way to get auto-completion these days is to use an extended tag library and there are quite a few of them.
 
reply
    Bookmark Topic Watch Topic
  • New Topic