JQuery Autocomplete dans une application Struts2

Comment ajouter de l’autocompletion sur un champ input d’un application Struts2 sans utiliser Dojo mais plutôt JQuery? Simplement en utilisant le plugin Autocomplete.js.

Pour ce faire, je me suis fortement inspiré de ce tutorial (en) pour réaliser cette manipulation. Je le complète pour ne plus avoir de foutu problème de conversion UTF-8!

1. Code de la classe Action

public class MonAction extends ActionSupport  {
	private static final Logger LOGGER = LoggerFactory.getLogger(MonAction .class);
	//Paramètre utilisé par autocomplete.js pour affiner l'autocomplete
	private String q;
	//Liste qui sera rafraichie à chaque lettre envoyé dans l'input
	private List<String> listTag;
	...
	public String findTag() {
		String qEnUTF8="";
		if (StringUtil.exist(q)){
			try {
				qEnUTF8 = new String(q.getBytes(), "UTF8");
			} catch (UnsupportedEncodingException e) {				
				LOGGER.error(e.getMessage(), e);
			}
		}
		listTag = daoFactory.getTagDAO().findTagList(qEnUTF8);
		return SUCCESS;
	}
	...
	//getter/setter
	...

Nous sommes obligé de reconvertir en UTF-8 le paramètre q transmis par jquery. Sinon votre recherche n’aboutira pas.

2. Code de tag.jsp contenant la liste des tags recherchés

<%@ taglib prefix="s" uri="/struts-tags"%>
<s:iterator value="listTag">
	<s:property value="tags" escape="false"/>
</s:iterator>

En ajoutant la propriété escape= »false » vous n’aurez pas de problème avec les accents lorsque vous sélectionnerez une valeur dans la liste déroulante.

3. Mapping dans le struts.xml

...
<action name="autoTag" class="mon.package.MonAction " method="findTag">
	<result name="success">/pages/tag.jsp</result>
</action>
...

4. Code de la JSP depuis laquelle on réalise la recherche

...
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/jquery/lib/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/jquery/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/jquery/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/jquery/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/jquery/autocomplete/jquery.autocomplete.js">
</script>
...
<link href="${pageContext.request.contextPath}/res/js/jquery/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
...
<script type="text/javascript">
	$().ready(function() {
		$("#tag").autocomplete('autoTag.action', {
			minChars: 2,
			max: 15,			
			multiple: true,
			autoFill: true
		});
	});
</script>
...
<s:textfield id='tag' name="tagField" label="tag" />
...

Voila, vous pouvez maintenant profiter de toute la puissance de l’Ajax dans vos applications Struts2… sans problèmes d’accentués ;-)

tags :
1 vote
01/12/2009 11:26
Ecrit par Costalfy - Afficher l'article originel
Vus : 3130
Publié par Costalfy : 10