Auto-completar com o Plugin JQuery para Struts 2

Neste tutorial iremos aprender como fazer um campo auto-completar utilizando o plugin JQuery para Struts 2. Como exemplo utilizaremos um campo de produtos.

1 – Baixar o plugin struts2-jquery-plugin-x.x.x.jar

http://code.google.com/p/struts2-jquery/downloads/detail?name=struts2-jquery-plugin-3.1.0.jar

2 – Copiar o plugin struts2-jquery-plugin-x.x.x.jar para a pasta libraries/struts2.x.x

3 – Adicionar o plugin as bibliotecas do projeto;

4 – Criar a seguinte classe:

package com.tartigrado.strada.model;
public class ProductList {

    private Long id;
    private String description;

    public ProductList(Long id, String description) {
        this.id = id;
        this.description = description;
    }

    //GET - SET

5 – Criar o seguinte método na classe ProductDAO:


@Transactional(readOnly=true)
public List<ProductList> findByDescription(String description) {
   description = "%" + description + "%";
   StringBuilder command = new StringBuilder();
   command.append("select new com.tartigrado.strada.model.ProductList(id, description) from Product ");
   command.append("where description LIKE :description ");
   command.append("order by description");
   Query query = this.em.createQuery(command.toString());
   query.setParameter("description", description);
   query.setMaxResults(10);
   return query.getResultList();
}

6 – Disponibilizar o método  “List<Product> findByDescription(String description)” na interface e implementação do produto;

7 – Criar no arquivo product-struts.xml a seguinte declaração de Action:

<package name="productJSON" extends="json-default">
    <action name="findProductJSON" class="com.tartigrado.strada.controller.ProductAction" method="findProductJSON">
        <result name="success" type="json" />
    </action>
</package>

8 – Criar o atributo term do tipo String na Classe ProductAction.java para receber o texto que foi digitado no campo auto-completar;

9 – Criar o seguinte método na Classe ProductAction.java:

public String findProductJSON() {
    setProductsList(service.findByDescription(getTerm()));
    return SUCCESS;
}

OBS: Verificar o método prepare para que nenhum código gere erro ao chamar o método findProduct JSON()

10 – Criar na classe responsável pela JSP onde vai estar o campo auto-complete (Ex: BuyAction.java) o atributo Long idProduct para receber o valor que vem da JSP;

11 – Não existindo o seguinte trecho de código no arquivo header.jspf inseri-lo:

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<sj:head jqueryui="true" jquerytheme="cupertino"/>

12 – Criar o seguinte trecho de código JavaScript na página JSP onde se encontra o campo auto-completar:

<script type="text/javascript">
    $.subscribe("autocompleteSelectProduct", function(event, data) {
        var productSelected = event.originalEvent.ui.item;
        $("#idProduct").val(productSelected.value);
        var nameProduct = productSelected.label;
        nameProduct = nameProduct.replace(/<strong>/g,'').replace(/<\/strong>/g,'');
        $("#nameProduct").val(nameProduct);
    });

    $.subscribe("clearFieldProduct", function(event, data) {
        var nameProduct = document.getElementById('nameProduct').value;
        if (nameProduct != '') {
            $("#product").val("");
            $("#product").val(document.getElementById('nameProduct').value);
            $("#nameProduct").val("");
        }
    });

    $.subscribe("addAtributeProduct", function(event, data) {
            var options = {};
            options.delay = 50;
            options.minimum = 2;
            options.selectBox = false;
            options.onsearchtopics = "addAtributeProduct";
            options.onselecttopics = "autocompleteSelectProduct";
            options.list = "productsList";
            options.listkey = "id";
            options.listvalue = "description";

            options.jqueryaction = "autocompleter";
            options.id = "product";
            options.oncom = "clearFieldProduct";
            options.href = "findProductJSON.action";

            jQuery.struts2_jquery.bind($('#product'), options);
    });
</script>

13 – Inserir o seguinte código no formulário onde se encontra o campo auto-completar:

Produto: <sj:autocompleter name="product" id="product" size="20" onSearchTopics="addAtributeProduct"/>
<s:hidden name="idProduct" id = "idProduct" />
s:hidden name="nameProduct" id = "nameProduct" />

Deixe uma resposta