7 jun
2017

Autocompletado de datos con Booststrap Typeahead + Spring MVC y JavaScript desde la base de datos

Estoy intentando hacer un autocompletado de datos utilizando el typeahead de bootstrap.

La idea es que, cuando escriba un código en el input, haga una búsqueda desde la base de datos. Al seleccionar una de ellas, automáticamente me rellene el código y el nombre.

He intentado hacerlo, pero no lo he logrado, ¿alguien me puede ayudar?

Este es mi código HTML

 <div class="form-group">
    <div class="col-sm-11">
      <label for="cuenta_codigo" class="col-sm-2 control-label">Cuenta Contable:</label>
      <div class="col-sm-3">
          <form:input id="cuenta_codigo" path="cuenta.ccuenta_cod" cssClass="form-control" placeholder="Código" autocomplete="off" data-provide="typeahead"/>
      </div>
      <div class="col-sm-6">
          <form:input id="cuenta_nombre" path="cuenta.vcuenta_nombre" cssClass="form-control" placeholder="Nombre" />
      </div>
   </div>
</div>

Este en mi Controller

@RequestMapping(value = "/master/cuenta/ajax", produces = MediaType.APPLICATION_JSON_VALUE)
public List<AutoType> getAjax(@RequestParam("type") String type, @RequestParam("param") String param){

    List<AutoType> lista = new ArrayList<>();

    try {
        lista = cuentaService.getCuentaAjaxByCode(param);
    } catch (Exception e) {
        logger.error(e);
    }

    return lista;
}

Este es mi Código JavaScript

<script>
$(document).ready(function () {
    $('#cuenta_codigo').typeahead({
        source: function (request, response) {
            $.ajax({
                url: "/master/cuenta/ajax",
                type: "POST",
                data: {
                    param: request.param
                },
                dataType: "json",
                success: function (data) {
                    response(data);
                }
            });
        }
    });
});
</script>

Si es necesario os dejo el DAO Implement y el Service Implement

Dao Implement

@Override
public List<Cuenta> getCuentaAjax(String code) {
    String namedQuery = "Cuenta.getAjaxByCode";
    List<FilterHQL> filters = new ArrayList<>();
    filters.add(new FilterHQL("ccuenta_cod", code+"%"));
    return hibernateUtil.fetchListByParamHQL(filters, Cuenta.class, namedQuery);
}

Service Implement

@Override
public List<AutoType> getCuentaAjaxByCode(String code) {
    List<AutoType> json = new ArrayList<>();
    List<Cuenta> lista = cuentaDao.getCuentaAjax(code);
    for (Cuenta cuenta : lista) {
        json.add(new AutoType(cuenta.getCcuenta_cod(), cuenta.getVcuenta_nombre()));
    }
    return json;
}    

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation