Select2 Ajax不根据查询过滤结果

时间:2013-03-05 19:29:49

标签: jquery-select2

我是Select2的新手,并且无法集成AJAX。当我搜索时,结果不会根据查询进行过滤。

以下是它的外观:http://i.imgur.com/dAPSSDH.png - 正确的字符在结果中加下划线,但没有任何内容被过滤掉。在我的非ajax Select2和我见过的例子中,过滤似乎有点自动发生,所以我对编写自定义过滤器犹豫不决,因为可能已经内置了一个更好的过滤器。

这是我的代码:

<script>
  $("#search_bar").select2({
    placeholder: "Search for another Concept",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
      url: "/concepts/names_for_search",
      dataType: 'json',
      data: function (term, page) {
        return {
        q: term, // search term
        page: page
         };
      },
      results: function (data, page) {
        return { results: data};
      }
    },
  });
</script>

此外,这是我的JSON示例:

[{"id":1,"text":"Limits"},{"id":2,"text":"Derivatives"},{"id":3,"text":"One-Sided Limits"},{"id":4,"text":"Formal Definition of a limit"}]

有什么想法吗?希望我只是做一些愚蠢的事情,这是一个快速解决方案。提前感谢您的帮助。

2 个答案:

答案 0 :(得分:10)

您需要在服务器端编写自定义过滤器以过滤结果。您在框中键入的内容将保存在“term”中,然后将“q”作为请求参数与ajax调用一起发送。所以ajax打电话给 网址: “?/概念/ names_for_search Q = DERI”
应该只返回过滤结果而不是所有结果。

更新
每次在搜索框中输入时,Select2都会进行AJAX调用。您必须在服务器端过滤结果,然后根据搜索框中的文本返回结果 我在我的JSP / Servlet应用程序中使用它,如下所示

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException  
{
    String searchTerm = request.getParameter("q");

    String json = getOptions(searchTerm);
    //getOptions method will return a string of  in JSON format
    //[{"id":"1","name":"Derivatives"}]
    response.getWriter().write(json);
}

您的JavaScript代码是正确的。

我发现Select2使用here。如果您打开链接http://www.indiewebseries.com/search?q=indhttp://www.indiewebseries.com/search?q=in,则获得的结果会有所不同,并且会基于'q'参数。
在你的情况下,调用url'/ concepts / names_for_search?q = d'和'/ concepts / names_for_search?q = deri'的结果是相同的(即未过滤)

答案 1 :(得分:3)

这个问题是在github项目中提出的,答案是:在服务器端过滤。 不使用AJAX时调用的默认过滤器函数存在于matcher参数的Select2文档中:

function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }