JQUERY mostrare le opzioni di una select simulando il click

[robynosse]

Ciao a tutti,

è possibile simulare un click su una select, per vederne le opzioni direttamente da jquery, come se l'utente avesse fatto click?
Ho un campo input di ricerca, in base al campo di ricerca mostro o nascondo i campi option, es:

L'utente scrive nel campo input di ricerca 'a', al rilascio del tasto nel campo input, evento keyup, percorro le option della select, se l'option non contiene la lettera a dopo il keyup, la nascondo.
La select è questa:

<select>
<option value="aa">aa</option>
<option hidden value="bb">bb</option>
<option value="ccaa">ccaa</option>
</select>

Il problema è che vorrei che si mostrasse la select come se l'utente avesse fatto click su di essa, è possibile?


Grazie,
Roberto

[Dascos]

Possiblissimo con jquery e select2 (un piccolo plugin)
Io uso questa funzione

function render_special_select(divname, classname, is_id, width) {
    if (width != undefined) {
        var larg = width;
    } else {
        var larg = "150px !important";
    }
    if (is_id) {
        jquery_element = $('#' + divname);
    } else {
        jquery_element = $(divname);
    }
    jquery_element.select2({
        containerCssClass : classname,
        dropdownCssClass : classname + "_results",
        minimumResultsForSearch : 5,
        allowClear : true,
        enabled: true,
        placeholder : "Scegli...",
        formatNoMatches : function(term) {
            return "Nessuna corrispondenza trovata";
        },
        formatSearching : function() {
            return "Ricerca in corso...";
        },
        width : larg
    });
}

che aggancio a una normale select html

<div id="contenitore_drop_down_ID_Tipo_Record_lista" >        
<select id="drop_down_ID_Tipo_Record_lista" name="drop_down_ID_Tipo_Record_lista"  size="25"  class="">            
<option value="22" >Fattura Emessa</option>
<option value="30" >Prevetivo Attivo</option>
<option value="31" >Proforma Attivo</option>
<option value="23" >Fattura Ricevuta</option>
<option value="62" >Nota di Credito</option>
<option value="430" >Nota di Credito Ricevuta</option>
<option value="429" >Ddt</option>
<option value="0" selected="selected">Tutti</option>
</select>
</div>

e poi la richiamo via js con

render_special_select('#contenitore_drop_down_ID_Tipo_Record_lista select', 'new_drop_down', false);

Questo in pratica crea una "nuova" select che ha incorporato un campo di ricerca e, mentre digiti, "toglie" tutte le opzioni della select che NON contengono quello che stai digitando.
Credo che sia più o meno quello che stai cercando.
Vedi https://select2.org/appearance#example

[robynosse]

Possiblissimo con jquery e select2 (un piccolo plugin)
Io uso questa funzione

function render_special_select(divname, classname, is_id, width) {
    if (width != undefined) {
        var larg = width;
    } else {
        var larg = "150px !important";
    }
    if (is_id) {
        jquery_element = $('#' + divname);
    } else {
        jquery_element = $(divname);
    }
    jquery_element.select2({
        containerCssClass : classname,
        dropdownCssClass : classname + "_results",
        minimumResultsForSearch : 5,
        allowClear : true,
        enabled: true,
        placeholder : "Scegli...",
        formatNoMatches : function(term) {
            return "Nessuna corrispondenza trovata";
        },
        formatSearching : function() {
            return "Ricerca in corso...";
        },
        width : larg
    });
}

che aggancio a una normale select html

<div id="contenitore_drop_down_ID_Tipo_Record_lista" >        
<select id="drop_down_ID_Tipo_Record_lista" name="drop_down_ID_Tipo_Record_lista"  size="25"  class="">            
<option value="22" >Fattura Emessa</option>
<option value="30" >Prevetivo Attivo</option>
<option value="31" >Proforma Attivo</option>
<option value="23" >Fattura Ricevuta</option>
<option value="62" >Nota di Credito</option>
<option value="430" >Nota di Credito Ricevuta</option>
<option value="429" >Ddt</option>
<option value="0" selected="selected">Tutti</option>
</select>
</div>

e poi la richiamo via js con

render_special_select('#contenitore_drop_down_ID_Tipo_Record_lista select', 'new_drop_down', false);

Questo in pratica crea una "nuova" select che ha incorporato un campo di ricerca e, mentre digiti, "toglie" tutte le opzioni della select che NON contengono quello che stai digitando.
Credo che sia più o meno quello che stai cercando.
Vedi https://select2.org/appearance#example

...sì, è proprio quello che cerco.
Ma dove trovo il plugin da scaricare?
...nel link che mi hai inviato mostra come usarlo ma non dove scaricarlo, o non lo vedo io...

Io il campo input lo iniettavo direttamente con la presenza di una specifica classe, dovrò fare lo stesso con questo sistema, anche perché ne ho più di una di select.
Inoltre ho select che si aggiungono dinamicamente al codice html, quindi sarà leggermente più complicato.
Farò in modo che si inietti col nuovo metodo.

[Dascos]

Il plugin lo trovi su https://github.com/select2/select2/releases

Una volta capito come funziona, diventa facile da usare e customizzare....se hai più selectbox ti conviene renderle Select2 usando delle variabili js, del tipo

function rendiSelectDinamica(div_name){
$("#" + div_name).select2( .... );
}

function recuperaSelectDinamica(div_name){
return $("#" + div_name);
}

la seconda funzione poi la puoi usare, per esempio, per "annullare" le selezioni

recuperaSelectDinamica('primaSelect').val(null).trigger('change');

[robynosse]

Il plugin lo trovi su https://github.com/select2/select2/releases

Una volta capito come funziona, diventa facile da usare e customizzare....se hai più selectbox ti conviene renderle Select2 usando delle variabili js, del tipo

function rendiSelectDinamica(div_name){
$("#" + div_name).select2( .... );
}

function recuperaSelectDinamica(div_name){
return $("#" + div_name);
}

la seconda funzione poi la puoi usare, per esempio, per "annullare" le selezioni

recuperaSelectDinamica('primaSelect').val(null).trigger('change');

Ho implementato e funziona.
Ho due problemi.
1) Poniamo di avere questa select:

<select class="miaselect">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option> 
</select>

al caricamento della pagina eseguo:

$('.miaselect').select2();

Ora, ho la necessità di clonare la select, quindi mi ritrovo con il codice html:

<select class="miaselect">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option> 
</select>

<select class="miaselect">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option> 
</select>

La prima select funziona la seconda no perché ovviamente il comando:

$('.miaselect').select2();

l'ho eseguito al caricamento della pagina quando ancora non esisteva la seconda select, l'ho aggiunta dinamicamente, gli eventi registrati valgono solo per la prima select.
Dovrei prima di clonare l'elemento annullare tutte le select2, clonare l'elemento e lanciare nuvamente il comando:

$('.miaselect').select2();

É possibile annullare tutte le select, in modo che ritornino normali.

2) Perché si vede cosi piccola la select? Utilizzo boostrap e la select occupa adesso la meta in altezza rispetto a prima.

Grazie,
Roberto