Selectize.js: Enter key should submit form

[nesl247]

I'm not sure if I am missing an option, but it would be nice to be able to allow the enter key to submit the form, even when selectize has focus.

[zevnikrok]

+1
Is there any progress on this? Or any workaround I can catch enter keypress? Thanks.

[resurtm]

:+1:

[mablae]

I did this by hooking into the onCreate and onItemAdd methods. From there I fire classic custom jquery events. Outside of the selectize initalization I listen on this event and trigger the form submit from there with classic $(#form).submit()..

A bit complicated but it works: http://www.svb24.com (the top search bar)

I am also doing an additional if-condition for redirecting to links via. window.location.href instead of submitting the form...

[davidpanzarella]

@mablae care to share your code? Or can we just find it in the source of that page?

[mablae]

@davidpanzarella
http://www.svb24.com/themes/svb_black/js/jquery.svb-find.js

The code needs some more love, I am still implementing features in search module and after that, I'll clean up that code...

[zevnikrok]

I've managed to change the code and implement "onenterkeypress" callback and "enter_keypress" event.

https://github.com/zevnikrok/selectize.js/blob/master/src/selectize.js

The changes can be seen here. Unfortunately, I cannot make dist yet, since grunt and bower dislike each other.

[davidpanzarella]

@brianreavis any chance you will build this into the core as an option? I noticed you did a bunch of great updates today, but no mention of this. Thoughts?

[zevnikrok]

@davidpanzarella I've synched my fork with v0.9.1. So if you need it, you can get it there. And now it's a full compile, with minimized version also available.

[davidpanzarella]

Oh, i was actually curious about that as i saw that come through yesterday. Do you have any examples of how to implement it?

Also, he hasn't pulled it in yet right? If so, I'd assume it'd be 9.2 after.

Thanks!

[zevnikrok]

As easy as that:

jQuery('#select-id').selectize({
    onEnterKeypress: function(el) {
        jQuery('#form-id').submit();
    }
}

[davidpanzarella]

That's dope! :)

[zevnikrok]

Yup I see ..., didn't test thoroughly enough after merging with 0.9.1. Git merge did break some my changes. Expect new build today.

[zevnikrok]

OK, I've made a new build now. Pls report if it works now.

[davidpanzarella]

I've downloaded your version from 5am this morning, but now see an error:

Uncaught TypeError: undefined is not a function Line 1974 of Selectize.js

[brianreavis]

@davidpanzarella Are you using his standalone build?

[davidpanzarella]

Yes it is.

[zevnikrok]

@brianreavis maybe we should move this discussion to my fork?
@davidpanzarella here you have jsfiddle with my build: http://jsfiddle.net/rKna6/ and enterkeypress is working. Can you recreate your problem in jsfiddle?

[davidpanzarella]

So the issue for me seemed to be that there "el" was being passed to the function in the above example, but not in the jsfiddle one (onEnterKeypress: function(el)). Once i removed, it worked just fine! Thanks guys!

[sethherr]

:+1: on adding onEnterKeypress

[delfuego]

I'd love to see this implemented; not being able to hit enter to submit a form is a fairly major break from the intuitive way that people have learned to interact with forms on the web.

[rossshannon]

I’ve been using @zevnikrok’s fork with onEnterKeypress for a few months now in one of my projects and it’s worked really well. (Thanks zevnikrok.)

[h0jeZvgoxFepBQ2C]

+1 delfuego

[karalabe]

;)

s = $('#sel').selectize({
    onEnter: function() {
        alert("enter key pressed");
    }
})[0].selectize;

onKeyDown = s.onKeyDown.bind(s)
s.onKeyDown = function(e) {
    var result = onKeyDown(e)
    if (e.keyCode == 13) {
        this.settings.onEnter()
    }
    return result
}.bind(s)

http://jsfiddle.net/mxom8xxh/

[fjsj]

See: https://github.com/wayneashleyberry/selectize-enter-key-submit

[h0jeZvgoxFepBQ2C]

Here is also a solution:

var $select = $("#select").selectize({...});

$sele[0].selectize.on("change", function() {
  $("form").submit();
});

[zmirc]

Thanks a lot @fjsj
This is a great and necessary feature. It should be included in the main Selectize.js release :)

[zmirc]

Hey! Here's my improved version, based on @fjsj 's code, which fixes 2 issues:

• triggers submit event if Enter is pressed but no option is selected
• triggers submit event after user presses DOWN (which activates the dropdown options) then Enter in order to select the item he wanted (after pressing some UP/DOWN to navigate to it).

Selectize.define('enter_key_submit', function (options) {
    var self = this;

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

      return function (e) {
        // this.items.length MIGHT change after event propagation.
        // We need the initial value as well. See next comment.
        var initialSelection = this.items.length;
        original.apply(this, arguments);

        if (e.keyCode === 13
            // Necessary because we don't want this to be triggered when an option is selected with Enter after pressing DOWN key to trigger the dropdown options
            && initialSelection && initialSelection === this.items.length
            && this.$control_input.val() === '') {
          self.trigger('submit');
        }
      };
    })();
  });

// Include this in $('#yourSelector').selectize({
  plugins: ['enter_key_submit'],
  onInitialize: function () {
    this.on('submit', function () {
      this.$input.closest('form').submit();
    }, this);
  },

[jacquescrocker]

+1 -- this seems like core functionality for selectize.js

@zmirc thanks for the plugin

[304NotModified]

+1. Any plans for this?

[wolstat]

would love to see this also

[joallard]

As this is default functionality on a vanilla <input> but not <select>, but this is contrary to the current default and thus a breaking change, I will schedule this for 1.0.

[metamaker]

@karalabe Thank you! You saved me a day!

[karalabe]

@metamaker Hah, this was in a previous life :)) Cheers

[h0jeZvgoxFepBQ2C]

Aaand?

[petrosmm]

@zmirc extremely elegant solution needed been searching all day for a way to properly hook events such that enter key opens popup but only when not added value! +1

[karalabe]

This issue is 7 years old ;P you do the math

On Wed, Dec 16, 2020, 19:19 Mike Over [e-mail] wrote:

@joallard https://github.com/joallard Any chance this will be making it
into the library soon so I don't have to fork?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/selectize/selectize.js/issues/78#issuecomment-746668518,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAA7UGJZEP5GYCIRHILLCI3SVDT3LANCNFSM4AHLRLLQ
.