Topic: Autocomplete On Change Event

Watts free asked 4 years ago


Expected behavior

Retreiving $("#autocomplete").val() after "change" event on autocomplete input would display the selected value.

Actual behavior

The $("#autocomplete").val() only returns the key the user types and not the full selected string.

What event should be used to capture the selected value by either mouse or keyboard?

Resources (screenshots, code snippets etc.)

Type Tex, then use either the mouse click or keyboard to select Texas.

https://mdbootstrap.com/snippets/jquery/watts/2047221


dchen71 free answered 4 years ago


I have something setup similar to the example above. I am unable to make the click event work in the mdb-autocomplete-wrap but I am trying to make it so it prints out statements whenever I click on the autocomplete elements in the autocomplete box.

My code is like so:

$('#form-autocomplete').mdbAutocomplete({
    data: response.data
})

$(".mdb-autocomplete-wrap").on("click", function() {
    console.log("wow")
})

I am only able to get the click event when I change the .mdb-autocomplete-wrap's css from min-height to height but that only works in the empty ul and not whenever any of the elements are clicked on. Am I missing something with this click event?


Krzysztof Wilk staff commented 4 years ago

Hi!

We know this problem and already have task for it. We'll try to fix it as soon as possible :)

Best regards


Rimark free commented 3 years ago

Any updates here? Still having this issue...


Marcin Luczak staff commented 3 years ago

Hi,

Unfortunately, I cannot tell when this will be fixed.

Keep coding, Marcin


Watts free answered 4 years ago


That's perfect, you guys give the best support! Love your work.

Can you explain why the timeout is required? I never would have got to that.


Krzysztof Wilk staff commented 4 years ago

Function with change event gets the value just before the autocomplete corrects it, so that's why you always get for example "Tex" instead of "Texas".

So we have to call this function after autocomplete, right? And setTimeOut does it perfectly. Then you'll get updated, corrects value :)


Tomek Makowski staff answered 4 years ago


Check this out

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2048236?view=project#js-tab-view

Is this solution meets your expectations?

Regards.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.17.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes