Data autocompletion with Booststrap Typeahead + Spring MVC and JavaScript from the database

Question

Data autocompletion with Booststrap Typeahead + Spring MVC and JavaScript from the database

Navigation

#1 by (0 votes)

1

I am trying to autocomplete data using the bootstrap typeahead.

The idea is that, when you write a code in the input, do a search from the database. When selecting one of them, I automatically fill in the code and the name.

I tried to do it, but I have not succeeded, can someone help me?

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>
</div>

This on 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 necessary I leave you the DAO Implement and the 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;
}

java javascript bootstrap spring spring-mvc

asked by JRupailla 08.03.2017 в 16:06

source

1 answer

Log in but it does not show the next view How to know if there are elements in a matrix followed horizontally and vertically in Python

score 0 · Answer 1

Include in the method getAjax () the Model, type:

public List<AutoType> getAjax(@RequestParam("type") String type,
         @RequestParam("param") String param, Model model)

Done this, send the desired list to the view naming it "data" instead of the return because what you want to return is a json, example:

model.addAttribute("data", lista);

Edit:

It should be like that, is it how you do it?

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

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

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

    model.addAttribute("data", lista); 
}

The return to the jsp is done by the model.addAttribute () as long as the list has some value, you should check if the list receives the appropriate values and you are not returning an empty list in the first place.

By the way, imagine you have added the bean for the json?

<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
    <property name="defaultViews">
        <list>
            <ref bean="jsonView" />
        </list>
    </property>
</bean>

Once you have verified that the list has the appropriate values, the list will be treated as "data" within the typeahead because it is what you are naming, you should track if you are treating it appropriately in the jsp jsp