Topic: Change Event on autocomplete

Michael pro asked 5 years ago

Hi, the change event on autocomplete triggers before the value is actually changed, thus .val() still gives the old value. That's an odd and I guess unintentional behaviour.

Jakub Strebeyko staff commented 5 years ago

Hi there Micheal, Could you provide a reproducible behavior example here or on codepen / jsfiddle? Thanks. Best Regards, Kuba

Anna Morawska staff answered 4 years ago


value in the input field is put dynamically via jQuery in mdb_autocomplete method, so because of that onchange event isn't fired. If you want to, you can add this functionality by adding $input.trigger("change"); in mdb.js file.

$autocomplete.on('click', 'li', function (e) {
// Set input value after click

// Clear autocomplete

It should fix the problem.

dsmith77 free commented 4 years ago

the $autocomplete.on('click', 'li', etc... doesn't fire for me.

Anna Morawska staff commented 4 years ago

Hi there, 

could you provide us with more details? Any errors in the console? 

Timur Yaroshenko free answered 4 years ago

Hello, The same problem here: HTML: <div class="md-form offset-10px-tb"> <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete" placeholder="Type in or select product" required="required validate"><ul class="mdb-autocomplete-wrap"></ul> <button class="mdb-autocomplete-clear" style="visibility: hidden;"> <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns=""> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> <path d="M0 0h24v24H0z" fill="none"></path> </svg> </button> </div> JS:
var products = [
"Some value",
"Some value2"
$("#form-autocomplete").change(function () { alert($("#form-autocomplete").val()); }); will display you only data that you have entered into form-autocomplete control, not the selected one. Actually, the question is: Is there any event that I can subscribe to to get actual selected value after user has selected it? Thank you.  

Please insert min. 20 characters.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No