bootstrap-ajax-typeahead
bootstrap-ajax-typeahead copied to clipboard
problem: no data charge
I trying to make an autocomplete with bootstrap typeahead using the framework spring, but it not working. the idea is that when typing a code it show all datas from the database and when I select one, this complete me the code and the name.
This is my HTML code @
<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>
This is my 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;
}
This is my JavaScript code
@
<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>}
If it necessary these are my Dao implement and 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;
}
Why not use the 'ajax' option instead of passing a function on the 'source' ?