Tal vez, una de las funciones más usadas hoy en dia en el Web 2.0 junto con las ventanas flotantes, RichFaces nos ofrece el rich:suggestionbox, un componente facil de usar y donde ahora vamos a ver un sencillisimo ejemplo. Previamente debemos saber que necesitamos, pues un Bean, de sesión preferiblemente, aunque puedes usar un request, y dentro del bean solo necesitaremos un metodo que regrese un List, ArrayList o cualquiera que se extienda de la clase Collection.
Existen otras propiedades que vamos a tratar de explicar aqui
- tokens : Si deseas buscar más de un elemento, el token es el delimitador para hacer más sugerencias.
- height, width : Es el alto y el ancho de la venta que aparece para la sugerencia.
- cellpadding , cellspacing : Es el espacio entre el contenido y el borde.
- shadowOpacity, shadowDepth : Estos parametros sirven para mostrar la sombra de manera más personalizada.
- minChars : El número de caracteres necesarios para que la sugerencia aparezca.
- rules : Se pueden agregar una serie de reglas para las busquedas.
- nothingLabel : La cadena de texto que aparece si no encuentra ningún resultado.
<h:panelGrid columns="1" styleClass="wrapper"> <h:outputLabel value="Buscando Sugerencias" styleClass="title" for="name" /> <h:panelGroup> <h:panelGrid columns="2"> <h:inputText value="#{testBean.sugestion}" id="name" styleClass="textBox" size="50"/> <a4j:commandButton value="Sugerencias" styleClass="testButton" style="testButton fontBackgroundColor"></a4j:commandButton> </h:panelGrid> <rich:suggestionbox id="suggestionBoxId" for="name" suggestionAction="#{testBean.autocompletar}" var="result" tokens="," height="150" width="160" cellpadding="2" cellspacing="2" shadowOpacity="4" shadowDepth="4" minChars="1" rules="none" nothingLabel="No se encontro nada"> <h:column> <h:outputText value="#{result}" style="font-style:bold" /> </h:column> </rich:suggestionbox> </h:panelGroup> </h:panelGrid>
Y ahora el Bean, si usas Spring o JSF Nativo, declara el Bean donde sea conveniente.
public class TestBean { List<string> lista = new ArrayList<string>(); private String suggest = ""; public TestBean () { lista.add("JotaDeveloper"); lista.add("SwordFishCode"); lista.add("Juan Ortega"); lista.add("CNN Noticiero"); lista.add("Adobe Photoshop"); lista.add("Twitter"); } public List<string> autocompletar(Object suggest) { String pref = (String) suggest; ArrayList<string> result = new ArrayList<string>(); Iterator<string> iterator = lista.iterator(); while (iterator.hasNext()) { String elem = ((String) iterator.next()); if ((elem != null && elem.toLowerCase().indexOf(pref.toLowerCase()) == 0) || "".equals(pref)) { result.add(elem); } } return result; } public String getSugestion() { return sugestion; } public void setSugestion(String sugestion) { this.sugestion = sugestion; } }
Luciano
on Mar 19th, 2010
@ 8:23:
Gracias muy bueno el ejemplo, dejo una version un poco mas simplificada del autocompletar porque se me hizo algo confuso con el iterator, saludos!
public List<String> autocompletar(Object suggest) {
String pref = (String) suggest;
ArrayList<String> result = new ArrayList<String>();
for(String elem: lista){
if ((elem.toLowerCase().indexOf(pref.toLowerCase()) == 0)) {
result.add(elem);
}
}
return result;
}