2012-09-12 22 views
6

Soy nuevo en el mundo de Javascript, jQuery, Ajax y jSON.mix of Select2 Loading Remote Data with Placeholders menú desplegable

Lo que tengo que hacer es mezclar 2 opciones disponibles con SELEC.2

Marcadores de

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

y

carga remota de datos

$("#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 
}); 

Como se puede ver en la Seleccione el sitio web, estas opciones son bastante diferentes. Cuando hago clic en Cargando datos remotos archivados, se abre una opción de búsqueda. Pero no quiero eso. Quiero el desplegable con la línea de opciones disponibles, el ejemplo de PlaceHolder.

En el ejemplo del marcador de posición, las opciones disponibles en el menú desplegable están codificadas en el código HTML. Lo que necesito es que cuando abras, vaya al archivo jSON y devuelva la información disponible en el json.

Lo ideal es utilizar la interfaz de usuario del marcador de posición Select2 con la funcionalidad (fetch json en el servidor) de la fecha de carga remota del otro ejemplo de Select2.

¿Alguna idea? Estoy abierto a cualquier solución súper rápida de Ajax si las 2 no se pueden combinar.

+0

Puede valer la pena mirar angularui: http://angular-ui.github.com/#directives-select2 – Tosh

Respuesta

1

Si sólo necesita cargar datos a su select2 a través de AJAX (sin búsqueda necesidad través de la API remota) puede hacerlo de esta manera:

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

(usando variables globales es a menudo una mala práctica, pero es sólo un ejemplo)

Cuestiones relacionadas