How to use search function in select option?

[atmaneuler]

I want to add search function in select option, how will I do it?
This is my code:
         {
            type: 'select',
            cls: 'dDayColSelector',
            options: function (ui) {
              const CM = this.getColModel(),
                opts = [];
              for (let i = 0; i < CM.length; i++) {
                const titleLst = {},
                  column = CM;
                titleLst[column.dataIndx] = column.title;
                if (!column.menuInHide) {
                  opts.push(titleLst);
                }
              }
              return opts;
            },
            listeners: [
              {
                change: function (evt) {
                  const CM = this.getColModel(),
                    $toolbar = this.toolbar(),
                    $dDayColSelector = $toolbar.find('.dDayColSelector').val();
                  for (let i = 0; i < CM.length; i++) {
                    const column = CM,
                      dataIndx = column.dataIndx + '';
                    if (CM.menuInDisable) {
                      continue;
                    }
                    if ($$.inArray(dataIndx, $dDayColSelector) === -1) {
                      CM.hidden = true;
                    } else {
                      CM.hidden = false;
                    }
                  }
                  this.refresh();
                },
              },
            ],
            attr: 'multiple=\'multiple\'',
            Fstyle: 'height:60px;',
          },


And this is what I want it to be

[paramvir]

Recent versions have inbuilt column show/hide select list in the header of grid and they have search option enabled by default.

But it seems from your code that you are trying to add column show/hide select list in the toolbar.

You can use pqSelect to add search option to the select list, example: https://paramquery.com/pro/demos40/showhide_columns