How can I act on a selection as soon as it is made, without requiring a button click?

[gschneiderman]

I'm trying to do something which seems like it should be very straightforward, but just can't figure it out. I'm pretty new to JavaScript, so I may be missing something obvious. I would like to act on the newly selected value as soon as it is chosen (e.g. with a click or Enter), without requiring a button press. But I can't figure out which event to use. "oninput" fires whenever anything is typed in the input field, but not when the input field value is changed by picking an option from the list of suggestions. The "awesomplete-select" event seems like it should work, but it doesn't. I suspect that's because of event.preventDefault(), but if so I don't know how to override that and make the event fire. Thanks for any assistance anyone can offer!

[gschneiderman]

How do I add a label to this issue?

[vlazar]

You can use awesomplete-selectcomplete event which is fired when selection is made. See #16438 (comment)

The awesomplete-select event is here to allow cancelling awesomplete-selectcomplete event, so if you use evt.preventDefault() in awesomplete-select handler then awesomplete-selectcomplete event won't be triggered.

[gschneiderman]

Thanks, I really appreciate the reply. I'm having difficulty following what is going on there with the jquery and the bind. Here is the code I have that is not working:

input = document.getElementById("districtPicker1");
var awesomplete = new Awesomplete(input);
awesomplete.list = districtNameArray;
input.setAttribute("awesomplete-selectcomplete", "selectDistrictWithPicker()");
input.setAttribute("oninput", "selectDistrictWithPicker()");

The "oninput" event gets fired whenever a character is typed into the input field.
But the "awesomeplete-selectcomplete" event doesn't get fired at all.

Do I need to do something analogous to
Awesomplete.$.bind(input, {
"awesomplete-selectcomplete": function(evt) {
console.log(evt.text); // String {label: "Java", value: "Java", valueOf: function, toString: function}
}
});
? Is there a vanilla JS way to do this? I am not currently using jQuery. Or could you help me to understand what that code is doing?

Thanks again.

[vlazar]

It looks like you need something like this:

input = document.getElementById("districtPicker1");
var awesomplete = new Awesomplete(input);
awesomplete.list = districtNameArray;
Awesomplete.$.bind(input, { "awesomplete-selectcomplete": selectDistrictWithPicker });

The Awesomplete.$.bind function (which is part of Awesomplete) attaches selectDistrictWithPicker event handler to the awesomplete-selectcomplete event.

function selectDistrictWithPicker(evt) {
  console.log(evt.text);
}

[gschneiderman]

Fantastic, that did the trick. Thank you! I still don't quite follow how it's working, but with the explanation you provided and a bit of time I should be able to get there.

[LeaVerou]

Please note that Awesomplete does not use jQuery. JQuery is not the only thing that can define a $ function.
Closing this, since the issue seems to be fixed.

[jotajotaramos]

It looks like you need something like this:

input = document.getElementById("districtPicker1");
var awesomplete = new Awesomplete(input);
awesomplete.list = districtNameArray;
Awesomplete.$.bind(input, { "awesomplete-selectcomplete": selectDistrictWithPicker });

The Awesomplete.$.bind function (which is part of Awesomplete) attaches selectDistrictWithPicker event handler to the awesomplete-selectcomplete event.

function selectDistrictWithPicker(evt) {
  console.log(evt.text);
}

This actually worked perflectly for my case.

Thanks a lot!