Cómo implementar el data-live-search="true" en bootstrap 4 desplegable?

Link de abajo contiene una buena explicación, sin embargo, fue para el Bootstrap 3.

Bootstrap 3 seleccione

InformationsquelleAutor Abhilash | 2017-07-10

3 Comentarios

  1. 6

    Como de 10. De julio de 2017, la cuestión de la Bootstrap 4 apoyo con bootstrap-seleccione es todavía abierto. En el tema abierto, hay algunas ad-hoc soluciones que usted podría intentar con su proyecto.

    O usted podría utilizar una biblioteca como Select2 y agregar un tema para que coincida con Bootstrap 4. Aquí está un ejemplo: Seleccione 2 con Bootstrap 4 (descargo de responsabilidad: yo no soy el autor de este blog y no he verificado si esto todavía funciona con todas las versiones de Bootstrap 4).

  2. 5

    Tomé la respuesta de PirateApp y lo hizo reutilizables. Si se incluye este script va a transformar todo lo selecciona con la clase ‘.desplegable’ a búsquedas de listas desplegables.

    HTML

    <div class="dropdown">
    <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Benutzer
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown_user">
        <form class="px-4 py-2">
            <input type="search" class="form-control search" placeholder="Suche.." autofocus="autofocus">
        </form>
        <div class="menuItems">
            <input type="button" class="dropdown-item" type="button" value="Test1"/>
            <input type="button" class="dropdown-item" type="button" value="Test2"/>
            <input type="button" class="dropdown-item" type="button" value="Test3"/>
        </div>
        <div style="display:none;" class="dropdown-header dropdown_empty">No entry found</div>
    </div>
    

    Script

    $('.dropdown').each(function(index, dropdown){
    
    //Find the input search box
    let search = $(dropdown).find('.search');
    
    //Find every item inside the dropdown
    let items = $(dropdown).find('.dropdown-item');
    
    //Capture the event when user types into the search box
    $(search).on('input', function(){
        filter($(search).val().trim().toLowerCase())
    });
    
    //For every word entered by the user, check if the symbol starts with that word
    //If it does show the symbol, else hide it
    function filter(word) {
        let length = items.length
        let collection = []
        let hidden = 0
        for (let i = 0; i < length; i++) {
            if (items[i].value.toLowerCase().includes(word)) {
                $(items[i]).show()
            }
            else {
                $(items[i]).hide()
                hidden++
            }
        }
    
        //If all items are hidden, show the empty view
        if (hidden === length) {
            $(dropdown).find('.dropdown_empty').show();
        }
        else {            
            $(dropdown).find('.dropdown_empty').hide();
        }
    }
    
    //If the user clicks on any item, set the title of the button as the text of the item
    $(dropdown).find('.dropdown-menu').find('.menuItems').on('click', '.dropdown-item', function(){
        $(dropdown).find('.dropdown-toggle').text($(this)[0].value);
        $(dropdown).find('.dropdown-toggle').dropdown('toggle');
    })
    });
    
  3. 4

    A partir de la versión 1.13.1 hay soporte para el Bootstrap 4:
    https://developer.snapappointments.com/bootstrap-select/

    La aplicación sigue siendo exactamente la misma que en Bootstrap 3:

    • añadir class=»selectpicker» y datos-en vivo-buscar=»true»a su seleccione
    • agregar datos-tokens para sus opciones. El live search analizará estos datos token elemento cuando se realiza la búsqueda.

    Este es un ejemplo, tomado de la página del enlace de arriba:

    <select class="selectpicker" data-live-search="true">
      <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
      <option data-tokens="mustard">Burger, Shake and a Smile</option>
      <option data-tokens="frosting">Sugar, Spice and all things nice</option>
    </select>
    

    Vivir de búsqueda para el término de búsqueda ‘vaivén’ va a dejar sólo la tercera opción visible (porque de los datos-tokens «frosting»).

    No olvide incluir los archivos de inicio-seleccione CDN .y de css .js en su proyecto.
    Estoy muy contento de ver este live search estar disponibles de nuevo, ya que viene en muy práctico cuando se presentan grandes listas desplegables para el usuario.

Dejar respuesta

Please enter your comment!
Please enter your name here