2013-03-05 25 views
9

Sono nuovo a Select2 e sto avendo problemi ad integrare AJAX. Quando eseguo una ricerca, i risultati non vengono filtrati in base alla query.Select2 Ajax non filtra i risultati in base alla query

Ecco come appare: http://i.imgur.com/dAPSSDH.png - I caratteri corretti sono sottolineati nei risultati, ma nulla viene filtrato. Nel mio non-ajax Select2 e negli esempi che ho visto, il filtraggio sembra avvenire in qualche modo in modo automatico, quindi sono riluttante a scrivere un filtro personalizzato perché probabilmente c'è già uno già integrato.

Ecco il mio codice:

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

Inoltre, ecco un esempio della mia JSON:

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

Tutte le idee? Spero solo di fare qualcosa di stupido ed è una soluzione rapida. Grazie in anticipo per qualsiasi aiuto.

+1

anch'io che ci fosse un modo migliore per fare questo! Non trovo intuitivo andare al server solo per fare il filtraggio, se ho già tutte le righe con me! –

risposta

9

Per filtrare i risultati è necessario scrivere un filtro personalizzato sul lato server. Quello che scrivi nella casella viene salvato in "term" e quindi "q" viene inviato come parametro di richiesta con la chiamata ajax. Quindi la chiamata ajax a
url: "/ concepts/names_for_search? Q = deri"
dovrebbe restituire solo i risultati filtrati e non tutti i risultati.

Aggiornamento
Select2 farà un AJAX chiamata ogni volta che si digita nella casella di ricerca. È necessario filtrare i risultati sul lato server e quindi restituire i risultati in base al testo nella casella di ricerca.
Io lo utilizzo nella mia richiesta JSP/Servlet, come di seguito

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

Il codice JavaScript è corretto.

Ho trovato Select2 è utilizzato . Se apri il link http://www.indiewebseries.com/search?q=ind e http://www.indiewebseries.com/search?q=in i risultati ottenuti sono diversi e basati sul parametro 'q'.
Mentre in voi caso, i risultati per le chiamate a URL '/ concetti/names_for_search? Q = D' e '/ concetti/names_for_search? Q = deri' sono la stessa cosa (cioè non filtrata)

+0

Hey Grazie e scusa, questa risposta è tardissima. C'è un modo per riutilizzare il loro filtro come se non stessi facendo AJAX (magari copiando/incollando dal loro codice sorgente)? Inoltre, conosci qualche esempio a cui potresti indirizzarmi? Il googling leggero si è rivelato sorprendentemente piccolo. Grazie mille per il tuo aiuto - una volta che sarò in grado di upvotare le persone, ne avrai sicuramente una. –

+1

@MichaelNomitch - Ho aggiornato la risposta. Spero che questo ti aiuti. – darsheets

2

Questa domanda è stato chiesto sul progetto github e la risposta era: filtro sul lato server. La funzione di filtro predefinito chiamato quando AJAX non è utilizzato è presente nella documentazione Select2 sul parametro matcher:

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