DeuxHuitHuit / quicksearch

A jQuery plugin for searching through DOM Elements quickly
https://www.npmjs.org/package/jquery.quicksearch
Other
135 stars 35 forks source link

when implement quicksearch on a multiselect an additional button select appears #40

Open jaredshito opened 6 years ago

jaredshito commented 6 years ago

i implement your library in a multiselect , but i see up my inputs a button select that says nothing selected(sorry for my inglish btw)

captura de pantalla 178

html:

<div class="selector">
        <div class="row">
            <h2 class="card-inside-title">Estudios</h2>
            <select id="estudios" class="searchable" name="estudios[]" multiple="multiple">
                <?
                    foreach($tipoestudios as $tipoestudio)
                    {
                        echo '<optgroup label="'.$tipoestudio->nombre.'">';

                            $catestudios = $this->m_estudios->obt_CatEstudios($tipoestudio->id);

                            foreach($catestudios as $catestudio)
                            {
                                echo '<option value="'.$catestudio->id.'">'.$catestudio->nombre.'</option>';
                            }

                        echo '</optgroup>';
                    }
                ?>

            </select>
        </div>
    </div>

javascript:

<script type="text/javascript">
$(document).ready(function() {
$('#estudios').multiSelect({

selectableOptgroup: true,
selectableHeader: "<input type='text' size='30 px' class='search-input' autocomplete='on'               placeholder='buscar'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='on' placeholder='buscar'>",
afterInit: function(ms){

    var that = this,

    $selectableSearch = that.$selectableUl.prev(),
    $selectionSearch = that.$selectionUl.prev(),
    selectableSearchString = '#'+that.$container.attr('id')+'  .ms-elem-selectable:not(.ms-selected)',
    selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

    that.qs1 = $selectableSearch.quicksearch(selectableSearchString,{
               'show': function () {

                    $(this).prev(".ms-optgroup-label").show();
                    $(this).show();
                },
                'hide': function () {
                    $(this).prev(".ms-optgroup-label").hide();
                    $(this).hide();
                }
    })
    .on('keydown', function(e){
      if (e.which === 40){
        that.$selectableUl.focus();
        return false;
      }
    });

    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
    .on('keydown', function(e){
      if (e.which == 40){
        that.$selectionUl.focus();
        return false;
      }
    });
},afterSelect: function(){
  this.qs1.cache();
  this.qs2.cache();
},
afterDeselect: function(){
  this.qs1.cache();
  this.qs2.cache();

}
});
});

</script>
nitriques commented 6 years ago

Hi! Can you rephrase your problem ?

Also, (unrelated to your post), your php seems to be vulnerable to xss injection. You might want to call htmlspecialchars() on the values you output with echo.

jaredshito commented 6 years ago

well i was following this issue https://github.com/riklomas/quicksearch/issues/72 , in that issue nckenn put the script that im ussing , but the problem is when i implement that code the botton select appears in my page but in any part i put it , i think the quicksearch labrary do that, becouse when i dont use it my quicksearch looks ok

without quicksearch

nitriques commented 6 years ago

Can you show a with/without screenshot ? Because I still do not get where is the problem.

¿intentar en español?