select2 search jquery

bootstrap-select con botones personalizados y agregar nuevos valores sobre la marcha

Question

Necesitaba usar una lista desplegable que pudiera hacer esa funcionalidad:

1. Obtiene dinámicamente y carga valores de la base de datos.
2. tiene un cuadro de búsqueda incrustado
3. tiene 2 botones personalizados en cada Li, uno para eliminar y otro para editar.
4. En el campo de búsqueda, si el texto buscado no existe, agréguelo al ''ingresar'' al presionar, ya sea en la misma selección y también en la base de datos con Ajax.

Elegí la selección personalizada para @twitter bootstrap ''bootstrap-select'' del repositorio de silviomoreto git y, como no encontré la funcionalidad que quería, intenté hacerlo por mi cuenta.

Entonces, para aquellos que necesitan o desean agregar esa funcionalidad en sus aplicaciones web, escribo mi solución, que no es la mejor solución pero funciona, y estoy abierto a cualquier sugerencia para que funcione mejor.

1. paso: cree un selector de selección con parámetros: data-size = "5" (muestre 5 valores y agregue la barra de desplazamiento), data-live-search = "true" (agregue el cuadro de búsqueda en la parte superior) y cargue los valores que me sale de db (preferiblemente con ajax):

       <select class="selectpicker typedropdown" data-size="5" data-live-search="true">
                            <?php
                            $counter=0;
                            foreach($eventTypeList as $evType){
                                $counter++;
                                if(is_array($evType)){
                                    echo "<option>".$evType[''type_name'']."</option>";
                                }else{
                                    echo "<option>".$evType."</option>";
                                }

                            } ?>
                        </select>

2. paso: agregue los botones personalizados (editar, eliminar) (anular la función de prototipo ''crearLi'')

anule la función de prorotipo ''createLi'' en su archivo js principal de esta manera:

  $.fn.selectpicker.Constructor.prototype.createLi = function (){..}

Dentro :

var generateLI = function (content, index, classes, optgroup) {
        return ''<li'' + ........

Justo antes de la "devolución", agregue la línea con las dos clases de botones:

content += "<div class=''removeTypebtn''></div><div class=''editTypebtn''></div>";

de modo que, cuando crea los elementos de li, también crea los dos botones personalizados en cada fila.

3. paso: captura los eventos de ''clic'' para editar y eliminar el valor (también realiza una solicitud ajax en la base de datos para actualizar el dbtable)

$(document.body).on(''click'',''.btn-group.typedropdown .dropdown-menu ul li .removeTypebtn'',function(event){
        var index = $(event.target).closest( "li" ).data(''original-index'');//get the item index
        var type_name = $(event.target).closest( "li" ).text();
        deleteType(index,type_name);
    });

De forma similar, detectamos el evento ''clic'' para el ''elemento de edición'', por lo que lo omito.

ahora necesitamos hacer la parte interesante, eliminar el elemento seleccionado del selector de selección y también hacer una solicitud de ajax para eliminarlo de dbtable . La base de datos está fuera del alcance del tutorial, así que lo dejo fuera. prestar atención dentro de la función de éxito cómo elimino.

function deleteType(index,type_name){
        var url = "<?php echo $domain.$deleteType; ?>";
        data = {''index'':index,''type_name'':type_name};
        $.ajax({
            cache: false,
            url : url,
            type: "POST",
            data : data,
            success : function(data, textStatus, jqXHR){
                $(''.typedropdown'').find(''[data-original-index=$index]'').remove();//remove selected item from selectpicker
            $(''.typedropdown'').find(''option:contains($type_name)'').remove();";// remove value also from the hidden select
                $(''.selectpicker.typedropdown'').selectpicker(''val'', []);//clear selected
            },
            error : function(xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
    }

4. paso: cree la funcionalidad ''agregar nuevo valor'' en Enter (ya que sabe que el campo de búsqueda solo permite búsquedas dentro de los li)

Entonces , cuando iniciamos el componente selectpicker , cambiamos el mensaje '' noneResultsText '', al modificar el parámetro: noneResultsText :

//init selectpicker
    selectPickerType = $(''.selectpicker.typedropdown'').selectpicker({
        noneResultsText:''Add new {0}'',
        selectOnTab: true
    });

Entonces, cada vez que escribimos una nueva palabra que no existe, recibimos el mensaje Agregar nueva ''palabra''

Ahora tenemos que atrapar el evento clic .

$(''.selectpicker.typedropdown'').data(''selectpicker'').$searchbox.on(''keydown'',function(e){
            if(e.keyCode == 13){
                addNewDropdownValue(e.target.value,''type'');
                return false;
            }
        });

y la función addNewDropdownValue : (con una solicitud ajax a dbtable para agregar el nuevo valor) (preste atención a la función de éxito)

function addNewDropdownValue(newValue,tble){
    var url = "<?php echo $domain.$addDropdownValueURL; ?>";
    data = {''newValue'':newValue,''tble'':tble};
    var loading = $(''.loading'');
    $.ajax({
        cache: false,
        url : url,
        type: "POST",
        data : data,
        beforeSend: function( xhr ) {
            loading.css(''top'',screen.height/2);
            loading.css(''left'',screen.width/2);
            loading.html(''<div><img alt="loading..." src="<?php echo $domain; ?>/assets/images/loader/ajax_loader_blue_48.gif" /></div>'').show();
        },
        success : function(data, textStatus, jqXHR){
            loading.fadeOut(500);
            $(''.selectpicker.".$tble."dropdown'').append(''<option selected>$newValue</option>'');//append new item on the selectpicker
            $(''.selectpicker.".$tble."dropdown'').val(''$newValue'');//select the new value
            $(''.selectpicker.".$tble."dropdown'').selectpicker(''refresh'');//refresh the selectpicker
            $(''.".$tble."dropdown'').removeClass(''open'');//close the selectpicker
        },
        error : function(xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
    });
}

eso es todo, ahora tenemos un selector de inicio personalizado con los botones de eliminar y editar en cada fila y agregar nuevas funciones de texto al entrar.

Por favor, dime tu opinión sobre cómo podemos hacer que funcione mejor o si tienes alguna pregunta.

Answer 1

Cómo se podría hacer esto mejor es eliminar PHP de la ecuación. De hecho, elimine cualquier código del lado del servidor para generar elementos html o DOM. Esto te dejará con dos partes, el javascript para representar la IU y los métodos de base de datos a través de una API (node.js o similar).

La implementación sería similar a la siguiente:

$.ajax({
  url: "/api/databaseCall/",
  success: function(data){

/* 
Build DropDown
the data variable will be a hash or array of returned db results
iterate over them and build UI
*/

    for(var i=0; i < data.results.length; i++){

      var row = ''<option id='' + data.results[i].id + ''>'' + data.results[i].value + ''</option>'';
      $(".dropdown").append(row);
    } 

  }
});

Angular, reaccionar, columna vertebral, todos están construidos con este enfoque en mente. El único que endoso en este momento es backbone.js. La columna vertebral es muy fácil de aprender.

Una vez que cree la interfaz de usuario mediante programación con javascript, cualquier funcionalidad se vinculará automáticamente utilizando un marco como la red troncal.

Answer 2

Puedes hacer que funcione mejor si te olvidas de ese PHP arriba que realmente comienza todo esto.

Supongamos que tiene una función javascript que se conectará al servidor y obtendrá los valores en lugar de ese código PHP. La llamaremos función fetchData ()

fetchData () obtendrá los valores de la base de datos, vaciará la selección si tiene algún valor y colocará los nuevos valores en la selección. Luego, continuarás adjuntando tus eventos. (editar, borrar, etc ...)

ahora en el documento listo fetchData ();

en eliminar, ejecute la función de eliminar, luego, fetchData ();

en la actualización, ejecute la función de actualización, luego, fetchData ();

en cualquier evento que se le ocurra, ejecute la función de evento, luego fetchData ();

La belleza de este método es que no tiene que actualizar manualmente sus elementos cuando elimina o actualiza. Además, siempre obtiene nuevos registros de la base de datos cada vez que fetchData ().

Imagina que hay 10 usuarios diferentes que actualizan registros en 10 computadoras diferentes. con la forma anterior como usuario, no vería lo que los otros usuarios actualizaron hasta que actualice la página. pero ahora puedo ver eso cada vez que interactúo con la página porque se recuperará de la base de datos y obtendrá todos los registros.

Incluso puede dar un paso más y decir cada 30 segundos fetchData (); por lo que siempre me actualizo con la nueva información, incluso cuando no interactúo con la página.

Esto hace que su código esté limpio. Solo tendrá que preocuparse por un puñado de eventos después de escribir esta función, y no tiene que preocuparse por lo que sucede después de los eventos, en la pantalla de los usuarios, porque siempre llama a fetchData () y ya está hecho. En lugar de eliminar una opción cuando la eliminan o actualizan el texto y el valor de una opción cuando la actualizan, etc..etc ...