Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Change Event on autocomplete

Michael pro asked 7 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 7 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 6 years ago


Hi, 

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
$input.val($(this).text());
$input.trigger("change");

// Clear autocomplete
$autocomplete.empty();
})

It should fix the problem.
Best,
Ania


dsmith77 free commented 6 years ago

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


Anna Morawska staff commented 6 years ago

Hi there, 

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


Timur Yaroshenko free answered 6 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="https://www.w3.org/2000/svg"> <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').mdb_autocomplete({
data:products
});
$("#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.

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags