Selectize.js: MultiSelect selectize clears filter box when any item selected.

[daveedwards45]

I did:

• [x] Search for if my issue has already been submitted
• [ x] Make sure I'm reporting something precise that needs to be fixed
• [x ] Give my issue a descriptive and concise title
• [x ] Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• [x ] Indicate precise steps to reproduce in numbers and the result,
  like below

Problem can be demonstrated by the multi-select American States selector on
http://selectize.github.io/selectize.js/

The filter text gets cleared when a selection is made.
I would like the filter text to remain as an active filter after the first selection has been made.
(i.e. not to clear the input filter on option select)
For example : type 'New' to get an option list of 'New York', 'New Jersey', 'New Mexico' and 'New Hampshire'. Select one of these choices but keep pulldown open. Pulldown changes to show complete list of states and 'New' is cleared from input control. When you want to find the next option, you have to type 'New' again.

I used preserve_on_blur plugin from
https://github.com/eklingen88/selectize.js-plugins-preserve_on_blur
to keep the filter when leaving and re-entering the control and this worked well.

I tried to make a preserve_on_select plugin by copying this method but just got 'Type error e not defined' when testing it.

I eventually made a small local modification to selectize.js inside onOptionSelect

if (typeof value !== 'undefined') {
    self.lastQuery = null;
    // DJE 2017-10-25 This clears the selection filter when user selects a choice. 
    // We don't want it to do this >> self.setTextboxValue('');
    self.addItem(value);
    if (self.settings.closeAfterSelect) {
       // Moved setTextboxValue to here, so it doesn't affect filter  DJE 2017-10-25
       self.setTextboxValue('');
       self.close();

Could you advise on what you consider is the best permanent solution?
Can I put a plug-in override for onOptionSelect?

[Pictor13]

I tried to move the same line of code as you did; running "make test" doesn't throw any error to me.

Is there any file + line number, or a call stack, for the above error?

[matte00]

You can obtain this with a plugin extension. Try this:

/**
 * Plugin: "preserve_search" (selectize.js)
 * Based on: "preserve_on_blur" of Eric M. Klingensmith
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
Selectize.define('preserve_search', function (options) {
    var self = this;

    options.text = options.text || function (option) {
        return option[this.settings.labelField];
    };

    this.onBlur = (function (e) {
        var original = self.onBlur;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            // Do the default actions
            original.apply(this, [e]);

            // Set the value back                    
            this.setTextboxValue(inputValue);
        };
    })();

    this.onOptionSelect = (function (e) {
        var original = self.onOptionSelect;

        return function (e) {
            // Capture the current input value
            var $input = this.$control_input;
            var inputValue = $input.val();

            original.apply(this, [e]);
            this.setTextboxValue(inputValue);
            this.refreshOptions();
            if (this.currentResults.items.length <= 0) {
                this.setTextboxValue('');
                this.refreshOptions();
            }
        };
    })();
});

Then when you create you selectize set the plugin.
$('#selectizeId').selectize({plugins: ['remove_button', 'preserve_search']});

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.