html Dolibarr - Combo Live搜索过滤器

Posted 2021-05-11

<!-- CSS Important library-->   
 <link rel="stylesheet" type="text/css" href="/htdocs/syndic/css/bootstrap-3.0.2.min.css">

    <td>Appartement</td>
			<td>
								<div class="col-sm-4" style="padding:0;">
				           <div id="num_appartement" class="selectpicker" data-clear="true" data-live="true">
                                    <a href="#" class="clear"><span class="fa fa-times"></span><span class="sr-only">Annuler la sélection</span></a>
                                    <button data-id="prov" type="button" class="btn btn-md btn-block btn-default dropdown-toggle">
                                        <span class="placeholder">Choisis une option</span>
                                        <span class="caret"></span>
                                    </button>
                                    <div class="dropdown-menu">
                                        <div class="live-filtering" data-clear="true" data-autocomplete="true" data-keys="true">
                                            <label class="sr-only" for="input-bts-ex-5">Chercher dans la list</label>
                                            <div class="search-box">
                                                <div class="input-group">
                                                    <span class="input-group-addon" id="search-icon5">
                                                        <span class="fa fa-search"></span>
                                                      <a href="#" class="filter-clear"><span><i class="fa fa-times" aria-hidden="true"></i> Supp. filtre</span></a>
                                                    </span>
                                                    <input type="text" placeholder="Search in the list" id="input-bts-ex-5" class="form-control live-search" aria-describedby="search-icon5" tabindex="1" />
                                                </div>
                                            </div>
                                            <div class="list-to-filter">
                                                <ul class="list-unstyled">
                                                    <li class="optgroup">
                                                        <span class="optgroup-header">List Group <span class="subtext"></span></span>
                                                        <ul class="list-unstyled" id="ul_appartement">
<!--                                                             <li class="filter-item items" data-filter="item_2" data-value="2">item 2</li>
                                                            <li class="filter-item items" data-filter="item 3" data-value="3">item 3</li>
                                                            <li class="filter-item items" data-filter="item 4" data-value="4">item 4</li>
                                                            <li class="filter-item items" data-filter="item 5" data-value="5">item 5</li> -->
                                                        </ul>
                                                    </li>
                                                </ul>
                                                <div class="no-search-results">
                                                    <div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>Aucune resultat <strong>'<span></span>'</strong> est trouvé.</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="bts-ex-5" value="">
                                </div>
														</div>
			</td>
        

        <script>
                    
        //Get url param
         var the_id ;
            $.urlParam = function(name){
                    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
                    if(results == null)
                            return null ;
                    else
                            return results[1] || 0;
            }
            the_id = $.urlParam('id');

    var ajaxUrl = window.location.origin+"/htdocs/syndic/paiement/class/paiementHandler.class.php" ;
  $.ajax({
                    async           : false,
                    method          : 'POST',
                    contentType : "application/json",
                  dataType      : "json",
                    url             : ajaxUrl,
                    data            : JSON.stringify({action:"fetch_combo_appartement"}),
                    success         : function(data) {
                                                                                console.log('Populate combo appartement');
                                                                                console.log(data);
                                                                                var appart="",isSelescted ;
                        
                                                                                data.forEach(function(element) {
                                                                                    
                                                                                    //if ID paiement in url identic with Id paiement affected on this appartement
                                                                                    if(element.id_paiement == the_id ) isSelected = 'selected' ;
                                                                                    else                                                             isSelected = '' ;
                                                                                    
                                                                                    appart += '<li class="filter-item items '+isSelected+'" data-filter="'+element.num_appartement+' - '+element.nom+' - '+element.prenom+'" data-value="'+element.id+'">'+element.num_appartement+'</li>';
                                                                                });
                                                                                $('#ul_appartement').append(appart);
                                                                             },
                    error               : function(data){
                                                                        console.log('Error : ');
                                                                        console.log(data);
                                                                    }
    });

</script>
        <!-- JS Important library -->
        <script src="/htdocs/syndic/js/tabcomplete.min.js"></script>
        <script src="/htdocs/syndic/js/livefilter.min.js"></script>
        <script src="/htdocs/syndic/js/bootstrap-select.js"></script>