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;
}