quicksearch as Seller suit a group option

[dlennin]

In the finder with multi select optgroup, to look for certain items, the search engine not only hides the parent searches pure children someone can support me

[nitriques]

Can you:

1. Try the lastest version here https://github.com/DeuxHuitHuit/quicksearch This repo is not maintain anymore (see Deprecation notice: Version 2.0 #67)
2. Give us the code you are using
3. Your DOM structure.

Thanks!

[dlennin]

The script I use is:

$(document).ready(function() {
    $('#sector').multiSelect({

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

            var that = this,

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

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)

            .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();

        }
    });

});

this is my html code:

<% Iterator<Sector> itsector = SWBComparator.sortByDisplayName(Sector.ClassMgr.listSectors(wsite),user.getLanguage()); while(itsector.hasNext()){ Sector sector = itsector.next(); %> <optgroup label="<%=sector.getDisplayTitle(user.getLanguage())%>"> <% Iterator<Sector> itsubsec = SWBComparator.sortByDisplayName(Sector.ClassMgr.listSectorByParent(sector),user.getLanguage());; while(itsubsec.hasNext()){ Sector subsec = itsubsec.next(); %> <option value="<%=subsec.getShortURI()%>" title="<%=subsec.getDisplayTitle(user.getLanguage())%>" selected="selected" disabled="disabled"><%=subsec.getDisplayTitle(user.getLanguage())%></option> <%}%> </optgroup> <%}%>

This is the image that is built multiselect, a search is done but I need to also look in the optgroup and there but you hide matches, currently the library is prepared to do searches the options of a select but when coupled with a multiselect optgroups and is where the search options do not work anymore, I want to see how to solve it.

I hope you can help me with my problem as me it is urgent, thank you for your support.

[nitriques]

Ok but did you tried Step 1 ?

Try the lastest version here https://github.com/DeuxHuitHuit/quicksearch This repo (https://github.com/riklomas/quicksearch) is not maintain anymore (see #67)

[nitriques]

And by reading your code, I do not think you are not using it the right way... Can you reproduce it on jsbin/jsfiddle ?

[dlennin]

I'm using the component like this:

http://loudev.com/#demos

in section searchable, contains only one that I need and put options as in the image oprtgroups

[nitriques]

I think you should ask them why their demo does not work: https://github.com/lou/multi-select

I was not aware that the thing existed.

But, again, please answer this question:

Did you tried with the lastest version of the quicksearch plugin here https://github.com/DeuxHuitHuit/quicksearch ?

[dlennin]

the latest version of quicksearch and am taking on my part but do not know how to adapt optgroups

[nitriques]

but do not know how to adapt optgroups

No, it should work... If you could reproduce the problem on jsbin or jsfiddle I could be able to help more...

[dlennin]

ok then I'll put in jsbin or jsFiddle and I put my code, thanks for the support I will leave it

I did not take

[nitriques]

thanks for the support

You're welcome. I will be a lot easier with a jsbin/jsfiddle to play with.

[dlennin]

is the component of the search engine, I just do not look in the groups option in the options just do not know if I understand ???? any idea how to solve:

[nitriques]

I can't help you with a screenshot only. Please reproduce the problem on jsbin or jsfiddle I could be able to help.

[dlennin]

can you tell me if you see:
https://gist.github.com/anonymous/a355598b1bc069d0d3a1

is more or less like I'm driving alone I need a search engine and the images that had showing you earlier , make inquiries about parents and children and hide you can not find but parents and also also the children I am working with the library quicksearch adapt him but not how it currently is working but I just look for the children not if I understand well ??

[nitriques]

I do not see any 'input' element in your jsbin...

[dlennin]

the input element itself generate the Flight from jQuery script in section

[nitriques]

Your jsbin has an error in it (jQuery is not even loaded on the page)

[dlennin]

What happens is that it has the libraries jaquey is needed, that of /jquery.multi - select.js , / jquery.quicksearch.js

I'm just showing you my code see paragraph AS build , which not only how to solve the question I have to hide in The optgroups in my Component WHEN I Search

[nitriques]

What happens is that it has the libraries jaquey is needed, t

Yeah but if you want help from me, you need to be able to reproduce the problem on jsbin. If not, I am afraid I can't do anything else.

[nckenn]

Using this plugin https://github.com/DeuxHuitHuit/quicksearch, you can do this.

$(document).ready(function() {
$('#sector').multiSelect({

    selectableOptgroup: true,
    selectableHeader: "<input type='text' size='15px' class='search-input' autocomplete='on'               placeholder='try \"12\"'>",
    selectionHeader: "<input type='text' class='search-input' autocomplete='on' placeholder='try \"4\"'>",
    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();

    }
});

[puneetpapneja]

This is working for me.
Thanks
I have 2 more issues

1. this can not hide for selected optgroups but in deselect list no items is there.
2. i want to search with optgroups also.
   Can you please help ?

[jaredshito]

hi , the last script work 4 me i see the two inputs to search in the select , but i have a problem, in my page i see a select button that says nothing selected and i dont know why is right here i add my code and a screen of the issue(sorry 4 my inglish)
html:

 <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>

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

selectableOptgroup: true,
selectableHeader: "<input type='text' size='15px' 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();

}

});
});
screen: