Jquery: elenco a discesa dei filtri durante la digitazione

Question

Ho utilizzato un plug-in prototipo che filtra il contenuto di un menu a discesa durante la digitazione. Ad esempio, se hai digitato "gatto" nella casella di testo, solo gli elementi contenenti la sottostringa 'gatto' verranno lasciati come opzioni nel menu a discesa.

Qualcuno sa di un plugin jQuery che può fare questo?

Answer 1

ho scritto a little script to do this a pochi anni fa. Potrebbe essere facilmente impacchettato come un plug-in jQuery, probabilmente. Sei il benvenuto.

Lo faccio anche nel mio widget Dashboard PHP Function Reference se si desidera visualizzare il codice lì.

Answer 2

jQuery autocomplete plug

EDIT: Ho inizialmente legata al plugin autocomplete sbagliata.

Answer 3

Controllare questi plugin:

• SexyCombo
• QuickSelect
• DropList Filter

Answer 4

Provate il "filtro di opzioni di jQuery", sulla base di reali casella di selezione e la congruenza nella metà dei testi opzione: http://plugins.jquery.com/project/jquery_options_filter

per diyism

Answer 5

Stavo cercando qualcosa di simile, e il migliore per quello che mi serve sembra essere il JQuery UI MultiSelect. Trasforma le caselle di selezione multipla in una bella vista a doppio elenco, con filtro attivo nell'elenco principale.

MODIFICA: Nuovo sviluppo!

"Chosen è un plugin JavaScript che rende lunghe e ingombranti selezionare le caselle molto più user-friendly. E 'attualmente disponibile in entrambi i sapori jQuery e Prototype."

Sto utilizzando totalmente Chosen su tutti i progetti selezionati in un futuro prevedibile.

Answer 6

Select2 è un fork piuttosto recente di Chosen e ha molte più funzioni (ad esempio AJAX + HTML personalizzato per singoli elementi).

Answer 7

Ho appena implementato questa funzione rapida e sporca. Usa alcune variabili globali, potresti voler migliorare l'implementazione per rimuoverle.

Qui il '#xsca_member_filter' è il filtro come input di testo e '#members' è l'input di selezione.

$('documenet').ready(function(){ 
    init(); 
    $('#xsca_member_filter').keyup(function(){ 
     filter($(this)); 
    }); 
}); 

//save all available options with their values and the empty option. 
init = function(){ 
    options = new Object(); 
    $('#owner option').each(function(){ 
     var obj = $(this); 
     if(obj.attr("value") != "") 
      options[obj.attr('value')] = obj.html(); 
     else 
      emptyOption = obj.html(); 
    }); 
    selObj = $('#owner'); 
}; 

filter = function(elem){ 
    var filter = elem.val(); 
    var selected = $('#owner option:selected').val(); 

    //delete all options and add the empty option 
    selObj.html(""); 
    selObj.append("<option> "+emptyOption+" </option>"); 

    //add all options conaining the filter string 
    for(value in options){ 
     var option = options[value]; 
     if((options[value]).indexOf(filter) != -1){ 
      selObj.append("<option value='"+value+"'> "+options[value]+" </option>"); 
     } 
    } 

    //select the previously selected option 
    $("#owner option[value = '"+selected+"']").prop("selected", true); 
} 

Answer 8

$(document).ready(function() { 
 
    $("#myInput").on("keyup", function() { 
 
    var value = $(this).val().toLowerCase(); 
 
    $("#filter *").filter(function() { 
 
     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<h2>Filter</h2> 
 
<input id="myInput" type="text" placeholder="Search.."> 
 
<br><br> 
 
<div class="filter-by"> 
 
    <span>Filter by:</span> 
 
    <select class="status-filter" id="filter"> 
 
    <option value="">All</option> 
 
    <option value="paid">Paid</option> 
 
    <option value="accepted">Accepted</option> 
 
    <option value="pending">Pending</option> 
 
    <option value="rejected">Rejected</option> 
 
    </select> 
 
</div>