2013-03-05 43 views
9

Tôi mới dùng Select2 và đang gặp sự cố khi tích hợp AJAX. Khi tôi tìm kiếm, kết quả không được lọc dựa trên truy vấn.Select2 Ajax không lọc kết quả dựa trên truy vấn

Đây là giao diện: http://i.imgur.com/dAPSSDH.png - Các ký tự phù hợp được gạch dưới trong kết quả, nhưng không có gì được lọc ra. Trong Select2 không phải là ajax của tôi và trong các ví dụ tôi đã thấy, bộ lọc dường như xảy ra một cách tự động, vì vậy tôi do dự để viết một bộ lọc tùy chỉnh vì có lẽ một bộ lọc tốt hơn đã được tích hợp sẵn.

Dưới đây là mã của tôi:

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

Ngoài ra, đây là một ví dụ về JSON của tôi:

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

Bất kỳ ý tưởng? Hy vọng rằng tôi chỉ làm điều gì đó ngu ngốc và nó là một sửa chữa nhanh chóng. Cảm ơn trước sự giúp đỡ nào.

+1

tôi cũng muốn có một cách tốt hơn để làm điều này! Tôi không tìm thấy nó trực quan để đi đến máy chủ chỉ để làm lọc, nếu tôi có tất cả các hàng đã với tôi! –

Trả lời

9

Bạn sẽ cần viết bộ lọc tùy chỉnh ở phía máy chủ để lọc kết quả. Nội dung bạn nhập vào hộp được lưu trong 'thuật ngữ' và sau đó 'q' được gửi dưới dạng tham số yêu cầu bằng cuộc gọi ajax. Vì vậy, gọi ajax tới số
url: "/ khái niệm/tên_for_search? Q = deri"
chỉ nên trả lại kết quả được lọc chứ không phải tất cả kết quả.

Cập nhật
Select2 sẽ thực hiện cuộc gọi AJAX mỗi khi bạn nhập vào hộp tìm kiếm. Bạn phải lọc kết quả ở phía máy chủ và sau đó trả lại kết quả dựa trên văn bản trong hộp tìm kiếm.
Tôi đang sử dụng nó trong ứng dụng JSP/Servlet của tôi như sau

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); 
} 

mã JavaScript của bạn là đúng.

Tôi đã tìm thấy Select2 được sử dụng . Nếu bạn mở liên kết http://www.indiewebseries.com/search?q=indhttp://www.indiewebseries.com/search?q=in kết quả thu được khác nhau và dựa trên tham số 'q'.
Trong trường hợp của bạn, kết quả cho cuộc gọi đến url '/ khái niệm/tên_for_search? Q = d' và '/ khái niệm/tên_for_search? Q = deri' giống nhau (nghĩa là không được lọc)

+0

Xin cảm ơn và xin lỗi phản hồi này quá trễ. Có cách nào để chỉ tái sử dụng bộ lọc của họ như thể tôi đã không làm AJAX (có thể sao chép/dán từ mã nguồn của họ)? Ngoài ra, bạn có biết bất kỳ ví dụ nào bạn có thể chỉ cho tôi không? Ánh sáng googling đã bật lên đáng ngạc nhiên ít. Cảm ơn rất nhiều sự giúp đỡ của bạn - một khi tôi có thể nâng đỡ mọi người, bạn chắc chắn sẽ có được một. –

+1

@MichaelNomitch - Tôi đã cập nhật câu trả lời. Hi vọng điêu nay co ich. – darsheets

2

Câu hỏi này đã được hỏi trên dự án github và câu trả lời là: lọc ở phía máy chủ. Chức năng lọc mặc định gọi khi AJAX không được sử dụng hiện diện trong tài liệu Select2 trên tham số matcher:

function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; } 
Các vấn đề liên quan