2012-09-12 13 views
6

Sono nuovo del mondo Javascript, jQuery, Ajax e jSON.mix di Select2 Caricamento dati remoti con dropdown Segnaposto

Cosa devo fare è quella di mescolare 2 opzioni disponibili con SELECT2

Segnaposto

$("#e2_2").select2({ 
    placeholder: "Select a State" 
}); 

e

teletrasmissione dati

$("#e6").select2({ 
    placeholder: "Search for a movie", 
    minimumInputLength: 1, 
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
     url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
     dataType: 'jsonp', 
     data: function (term, page) { 
      return { 
       q: term, // search term 
       page_limit: 10, 
       apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
      }; 
     }, 
     results: function (data, page) { // parse the results into the format expected by Select2. 
      // since we are using custom formatting functions we do not need to alter remote JSON data 
      return { 
       results: data.movies 
      }; 
     } 
    }, 
    formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
}); 

Come si può vedere dalla Seleziona il sito web, queste opzioni sono abbastanza diverse. Quando faccio clic sul caricamento dei dati remoti archiviati, si apre un'opzione di ricerca. Ma non lo voglio. Voglio che il menu a tendina con le opzioni disponibili includa l'esempio di PlaceHolder.

Nell'esempio segnaposto, le opzioni disponibili nel menu a discesa sono hardcoded nell'HTML. Quello che mi serve è che quando apri, va al file jSON e restituisce le informazioni disponibili su json.

L'ideale è utilizzare l'interfaccia utente del segnaposto Select2 con la funzionalità (recupero json sul server) della data di caricamento remoto della data l'altro esempio Select2.

Qualche idea? Sono aperto a qualsiasi soluzione Ajax super veloce se il 2 non può essere combinato.

+0

Può valere la pena di guardare angularui: http://angular-ui.github.com/#directives-select2 – Tosh

risposta

1

Se avete solo bisogno di caricare i dati al vostro select2 tramite la tecnologia AJAX (nessuna ricerca necessità tramite API a distanza) si può fare in questo modo:

$.get("/path/to/your/data.json", function(data){window.ajaxData=data;}); 
$("#e2_2").select2({data: window.ajaxData, placeholder: "Select a State"}); 

(utilizzando le variabili globali è spesso cattiva pratica, ma è solo un esempio)

Problemi correlati