Select2

 Compartiu 

és un plugin de Jquery per a dropdown. Per al meu gust té més funcionalitats que chosen

Exemples

Laravel

• https://laracasts.com/series/laravel-5-fundamentals/episodes/24

Desplegable amb l'opció d'afegir noves entrades no disponibles a la llista actual

• https://laracasts.com/series/laravel-5-fundamentals/episodes/24

Als comentaris de:

https://laracasts.com/series/laravel-5-fundamentals/episodes/24

Hi ha un exemple de com detectar els tags nous i afegir-los a la base de dades.

Troubleshooting. Resol·lució de problemes

No mostra del tot be les icones si esta dins d'un center!

Pos aixo. Millor utilitzar solucions de grid per centrar:

<div class="row-fluid">
          <div class="span4"></div>
          
          <div class="span4">
          
          <i class="icon-group"></i> Unitat organitzativa: 
        <select id="organizational_units" style="width: 400px">
            <option></option>
            <?php foreach( (array) $data['organizational_units'] as $organizational_unit_key => $organizational_unit): ?>
            <?php if( $data['selected_organizational_unit_key'] == $organizational_unit_key ): ?>
            <option value="<?php echo $organizational_unit_key; ?>" selected="selected"><?php echo $organizational_unit; ?></option>
            <?php else: ?> 
            <option value="<?php echo $organizational_unit_key; ?>" ><?php echo $organizational_unit; ?></option>
           <?php endif; ?> 
        <?php endforeach; ?> 
        </select> 
          </div>
          
          <div class="span4"></div>

        </div>
        

No apareixen icones (CSS sprites) o apareixen duplicats

Select 2 conté a més del CSS una sèrie d'imatges .png amb CSS Sprites. Aquestes imatges són utilitzades com icones/imatges de fons al CSS i cal que estiguin al costat del CSS. Sinó les poseu no apareixeran les icones.

També pot passar que surti duplicat!. A mi em passava amb la plantilla ace.css, si carrego select2 després de ace apareix duplicat, si el carrego abans apareix bé, però perd els estils:

Duplicat

 $header_data= $this->add_css_to_html_header_data(
            $header_data,
                base_url('assets/css/ace.min.css'));
        $header_data= $this->add_css_to_html_header_data(
            $header_data,
            base_url('assets/css/select2.css'));

Sense Estils

 $header_data= $this->add_css_to_html_header_data(
            $header_data,
                base_url('assets/css/select2.css'));
        $header_data= $this->add_css_to_html_header_data(
            $header_data,
            base_url('assets/css/ace.min.css'));

Amb Fitxer d'estils modificat

El que he fet jo per a que es pugues veure sense duplicats i amb els estils, ha sigut crear un fitxer nou, per evitar sobreescriure els fitxers originals, i he afegit els següents estils com a importants

.select2-container .select2-choice {
    border-radius: 4px 4px 2px 2px!important;
}

.select2-container .select2-choice .select2-arrow {
    border-left: 1px solid #aaa !important;

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)) !important;
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%) !important;
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%) !important;
    background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%) !important;
    background-image: -ms-linear-gradient(top, #ccc 0%, #eee 60%) !important;
    
    background-image: linear-gradient(top, #ccc 0%, #eee 60%) !important;
}

.select2-search {
	padding-top: 5px !important;
}

i he cargat aquest fitxer juntament amb els altres2

 $header_data= $this->add_css_to_html_header_data(
            $header_data,
                base_url('assets/css/select2.css'));
            $header_data,
                base_url('assets/css/modifications_select2.css'));
        $header_data= $this->add_css_to_html_header_data(
            $header_data,
            base_url('assets/css/ace.min.css'));

No s'integra correctament a Grocery Crud: TypeError: $(...).select2 is not a function

No funciona si estem utilitzant a la mateixa pàgina Grocery Crud. Dona el problema:

TypeError: $(...).select2 is not a function

Sembla algun problema amb les carregues de javascripts! Això passa si carreguem select2 abans dels javascripts de Grocery Crud. Si invertim l'ordre aleshores funciona select2 però dona errors datatables (grocery crud amb datatables he provat!) és:

TypeError: $(...).dataTable is not a function

Vegeu també

• Dropdown
• Chosen
• Jquery
• HTML Select
• Selectize
• Jquery
• User Interface
• Components
• Combo box
• Utilitza CSS Sprites

Enllaços externs

• http://ivaynberg.github.io/select2/