Jquery: lista desplegable de filtro mientras escribe

Question

He utilizado un complemento prototipo que filtra el contenido de un menú desplegable a medida que escribe. Por ejemplo, si escribió 'gato' en el cuadro de texto, solo los elementos que contengan la subcadena 'gato' quedarán como opciones en el menú desplegable.

¿Alguien sabe de un plugin jquery que puede hacer esto?

Answer 1

escribí a little script to do this hace unos años. Podría empaquetarse como un complemento jQuery con bastante facilidad, probablemente. Eres bienvenido.

También hago esto en mi widget PHP Function Reference Dashboard si quiere ver el código allí.

Answer 2

jQuery plugin de autocomplete

EDIT: inicialmente vinculado con el plugin autocompletar mal.

Answer 3

Comprobar estos plugins:

• SexyCombo
• QuickSelect
• DropList Filter

Answer 4

Prueba el "filtro de opciones jquery", basado en verdadera caja de selección y coincidente en la mitad de los textos de opción: http://plugins.jquery.com/project/jquery_options_filter

para diyism

Answer 5

Yo estaba buscando algo similar, y la mejor para lo que necesito parece ser el JQuery UI MultiSelect. Convierte los cuadros de selección múltiple en una vista de listas duales muy ingeniosa, con filtrado activo en la lista maestra.

EDIT: New Development!

"Chosen es un plugin de JavaScript que hace, seleccione las casillas difíciles de manejar largas mucho más fáciles de usar. Está disponible actualmente en dos sabores jQuery y Prototype."

Estoy usando totalmente Chosen en todos los proyectos de selección de uso en el futuro previsible.

Answer 6

Select2 es una bifurcación bastante reciente de Elegido y tiene muchas más funciones (por ejemplo, AJAX + HTML personalizado para elementos individuales).

Answer 7

Acabo de implementar esta característica rápida y sucia. Utiliza algunas variables globales, es posible que desee mejorar la implementación para eliminarlas.

Aquí el '#xsca_member_filter' es el filtro como una entrada de texto y '# members' es la entrada de selección.

$('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>