jquery - bootstrap-select with custom buttons & add new values onthe fly -

i needed use dropdown list functionality:

1. dynamically fetches , loads values database
2. has embeded search box
3. has 2 custom buttons on each li, 1 delete , 1 edit.
4. the search field, if searched text not exist, add on 'enter' press, either on same select , on database ajax.

i choosed custom select @twitter bootstrap 'bootstrap-select' silviomoreto git repository , because did not find functionality want tried make on own.

so, need or add functionality on web-apps , write down solution, not best solution works, , open suggestions make work better.

1. step: create selectpicker parameters : data-size="5" (show 5 values , add scrollbar), data-live-search="true" (add search box on top) , load values db (preferably ajax):

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

2. step: add custom buttons (edit, delete) (override prototype function 'createli')

override prorotype function 'createli' on main js file this:

  $.fn.selectpicker.constructor.prototype.createli = function (){..} 

inside :

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

just before 'return' add line tha 2 button classes :

content += "<div class='removetypebtn'></div><div class='edittypebtn'></div>"; 

so , when create li items create 2 custom buttons on each row.

3. step: catch 'click' events edit & delete value (also makes ajax request on database update 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 item index         var type_name = $(event.target).closest( "li" ).text();         deletetype(index,type_name);     }); 

in similar way catch 'click' event 'edit item', omit it.

now need interesting part , delete selected item selectpicker , make ajax request delete dbtable. the database beyond tutorial scope , leave out. pay attention inside success function how remove.

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 selectpicker             $('.typedropdown').find('option:contains($type_name)').remove();";// remove value hidden select                 $('.selectpicker.typedropdown').selectpicker('val', []);//clear selected             },             error : function(xhr, ajaxoptions, thrownerror){                 alert(thrownerror);             }         });     } 

4. step: create 'add new value' functionality on enter (as know search field permit searches inside li's)

so, when init selectpicker component , change 'noneresultstext' message , altering parameter : noneresultstext :

//init selectpicker     selectpickertype = $('.selectpicker.typedropdown').selectpicker({         noneresultstext:'add new {0}',         selectontab: true     }); 

so, whenever write down new word not exist , message add new 'myword'

now need catch click event.

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

and addnewdropdownvalue function : (with ajax request dbtable add new value) (pay attention success function)

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 selectpicker             $('.selectpicker.".$tble."dropdown').val('$newvalue');//select new value             $('.selectpicker.".$tble."dropdown').selectpicker('refresh');//refresh selectpicker             $('.".$tble."dropdown').removeclass('open');//close selectpicker         },         error : function(xhr, ajaxoptions, thrownerror){             alert(thrownerror);         }     }); } 

that's , have custom bootstrap select-picker delete , edit buttons on each row , add new text functionality on enter.

please means, tell me opinion on how can make work better or if have questions.

how done better remove php equation. in fact, remove server side code generating html or dom elements. leave 2 pieces, javascript render ui , database methods via api (node.js or like).

the implementation following -

$.ajax({   url: "/api/databasecall/",   success: function(data){  /*  build dropdown data variable hash or array of returned db results iterate on them , build ui */      for(var i=0; < data.results.length; i++){        var row = '<option id=' + data.results[i].id + '>' + data.results[i].value + '</option>';       $(".dropdown").append(row);     }     } }); 

angular, react, backbone built approach in mind. 1 endorse @ time backbone.js. backbone easy learn.

once build ui programmatically javascript functionality bound automatically using framework backbone.