Autocomplete: onchange & selected value

Topic: Autocomplete: onchange & selected value

Hello, I have a problem with autocomplete control. I want to re-render the part of the page when user selected concrete value from an autocomplete control. But if I subscribe to .onchange event of input element then I receive only text which was entered by user, but not selected value. How I can get the actual value? 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.

Add comment

Anna Morawska staff answered 6 years ago

0 4 Best answer

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

Add comment

mshallop pro answered 6 years ago

0 0 Best answer

Hi - I'm having the same issue; I want to js-post the form when the user selects an option from the auto-complete input control. I added the "$input.trigger("change"); line to my mdb.js file ... but it seems to have no effect... Is there another step involved, say to generate the mdb.min.js file before it's available? Thanks! --mike

mshallop pro commented 6 years ago

Explicitly loading the mdb.js over the mdb.min.js file had no impact... On the change event, it's loading only the first letter I typed to get the drop-down to proc and displays that in the control instead of the selected text.

mshallop pro commented 6 years ago

To be clear, this function: $('#templateName').change(function() { var selectedItems = $(this).val(); console.log(selectedItems); scrape(); }); If I press the letter "a" to get the drop-down to open, an "a" is displayed in both the console.log and as the control.value. (I selected "Migration" in the drop down). How do you get the text, selected in the dropDown, to propagate up to the control where it can be scraped and post-processed?

Anna Morawska staff commented 6 years ago

Hello, there are two onChange events fired immediately one after another. This probably causes your problem. We already add this feature to our TODO list, so it will be implemented correctly in the future release. Best, Ania

mshallop pro commented 6 years ago

Thank you for the quick reply!

Anna Morawska staff commented 6 years ago

you're welcome :)

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

About author

Timur Yaroshenko

10Support score
1Questions 1Answers

0Snippets likes 0Snippets