Начальная загрузка с помощью пользовательских кнопок и добавление новых значений на лету

Мне нужно было использовать выпадающий список, который мог бы выполнять эту функцию:

1. динамически выбирает и загружает значения из базы данных
2. имеет встроенное окно поиска
3. имеет 2 пользовательских кнопки на каждом Li, одну для удаления и одну для редактирования.
4. в поле поиска, если искомый текст не существует, добавьте его при нажатии "enter", либо на том же самом выборе <option>, а также в базе данных с Ajax.

Я выбрал пользовательский выбор для @twitter bootstrap 'bootstrap-select' из репозитория silviomoreto git, и, поскольку я не нашел нужную функциональность, я попытался сделать это самостоятельно.

Итак, для тех, кому нужно или хотелось бы добавить эту функциональность в свои веб-приложения, я записал свое решение, которое не является лучшим решением, но оно работает, и я открыт для любых предложений, чтобы заставить его работать лучше.

1. шаг: создать селектор выбора с параметрами:   data-size = "5" (показать 5 значений и полосу прокрутки add), data-live-search = "true" (добавить окно поиска вверху) и загрузить значения, которые я получаю из БД (желательно с 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. шаг: добавление пользовательских кнопок (редактировать, удалять)    (переопределить функцию-прототип 'createLi')

переопределите функцию-прототип 'createLi' в вашем основном js файле следующим образом:

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

Внутри:

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

как раз перед "возвратом" добавьте строку с двумя классами кнопок:

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

так что при создании элементов li вы также создаете две пользовательские кнопки в каждой строке.

3. шаг: поймать события "клика" для редактирования & удалить значение (также выполняет ajax-запрос к базе данных для обновления 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);
    });

аналогичным образом мы отлавливаем событие "click" для "edit item", поэтому я его пропустил.

Теперь нам нужно выполнить интересную часть, чтобы удалить выбранный элемент из селектора выбора, а также сделать ajax-запрос на удаление его из dbtable. база данных выходит за рамки учебника, так что я оставил ее. обратите внимание внутри функции успеха, как я удаляю.

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. шаг: создайте функцию "добавить новое значение" на Enter (как вы знаете, поле поиска разрешает поиск только внутри li)

так, Когда мы инициируем компонент selectpicker, мы меняем сообщение noneResultsText, изменяя параметр : noneResultsText :

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

Итак, теперь, когда мы записываем новое несуществующее слово, мы получаем сообщение Добавить новое "мое слово"

Теперь нам нужно отловить событие click event.

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

и функция addNewDropdownValue: (с помощью ajax-запроса в dbtable для добавления нового значения) (обратите внимание на функцию успеха)

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);
        }
    });
}

что это, теперь у нас есть собственный селектор выбора начальной загрузки с кнопками удаления и редактирования в каждой строке и добавления новой функциональности текста при вводе.

пожалуйста, любым способом, скажите мне свое мнение о том, как мы можем сделать это лучше или если у вас есть какие-либо вопросы.

Ответы

$.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);
    } 

  }
});