Select2不工作,始终显示"未找到结果"

时间:2017-06-09 22:47:31

标签: jquery json ajax servlets jquery-select2

我已尝试过这个网站上的所有内容并且没有任何效果,我只想从servlet生成的JSON中获取状态,然后使用AJAX在选择栏上显示数据。

但我只是得到了一个"没有找到结果"无论我在选择栏上输入什么内容。

这是填充下拉列表的功能:

注意:已添加formatRepo和formatRepoSelection

$(document).ready(function() {
  $(".js-data-example-ajax").select2({
    ajax: {
      url: "/socialis/estadoController",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function(markup) {
      return markup;
    }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: formatRepo, // omitted for brevity, see the source of this page
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page

  });
});

这是Servlet的doGet方法:

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String estados = new Gson().toJson(localizacionDao.getEstados());

        response.getWriter().write(estados);

    }

我确认通过打印&#34; estados&#34;正确生成了JSON。每次我在选择栏上输入。

提前致谢。

1 个答案:

答案 0 :(得分:2)

修正:

基本上我使用的JSON格式是错误的,适合我的JSON格式是:

[{"id":7,"text":"Chiapas"},{"id":8,"text":"Chihuahua"}]

此外,对Select2功能进行了微小更改:

$(".js-data-example-ajax").select2({
        ajax: {
          url: "/socialis/estadoController",
          dataType: 'json',
          type: "GET",
          delay: 250,
          data: function (params) {
            return {
              q: params.term, // search term
              page: params.page
            };
          },
          processResults: function (data, params) {
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;

            return {
              results: data,
              pagination: {
                more: (params.page * 30) < data.total_count
              }
            };
          },
          cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1

      });

控制器也改变了:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    String searchTerm = request.getParameter("q");

    String estados = getOptions(searchTerm);              

    response.getWriter().write(estados);

}

注意结果的过滤是在服务器端完成的非常重要,基本上Ajax发送一个带有搜索词的请求,命名为&#34; q&#34;,每次输入内容时搜索栏。

因此,在每个请求中,函数&#34; getOptions&#34;过滤结果如下:

public String getOptions(String q){
    List<Estados> estados = localizacionDao.getEstados();
    List<Estados> estadosFiltered = new ArrayList<>();
    for (Estados Estado : estados) {
        if(Estado.getNombreEstado().contains(q)){
            estadosFiltered.add(Estado);
        }
    }
    String estadosString = new Gson().toJson(estadosFiltered);
    System.out.println(estados);
    estadosString = estadosString.replace("idEstado", "id");
    estadosString = estadosString.replace("nombreEstado", "text");
    return estadosString;
}

我希望这个答案有所帮助。