JQuery empty input not working with .val('');

Question

I have a function that works in my JQuery autocomplete.

The function itself seems to work, but when selecting from autocomplete list, the line to empty the input is not working.

I re-created the issue here:

http://jsfiddle.net/bv8nr2gp/1/

Everything works, except the line $('#' + x).val('');

UPDATE

I've updated the fiddle to include the missing elements.

If you enter a value in the input field and click Add it works. The value is added to the textarea and span and then removed from the input.

If you enter "one" or "two" in the input and choose it from the autocomplete list, it works apart from clearing the input

The elements with partial id like _display and _add seems to be missing in your jsfiddle. Please include those and explain in detail how we can test that it's not working — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jun 8, 2022 at 7:59
See update, just added it to the fiddle and added a further explanation — charlie
– charlie, Commented Jun 8, 2022 at 8:03
Please include the code in a snippet in the question, not relying on third-party sites. — fdomn-m
– fdomn-m, Commented Jun 8, 2022 at 8:44
Your issue is that you're clearing the input before the autocomplete has completed. So it goes: auto-complete:select event, your add function:clear input, auto-complete:set input to selected value. You can confirm this by adding a setTimeout around the .val('') jsfiddle.net/dgxk23b6 — fdomn-m
– fdomn-m, Commented Jun 8, 2022 at 8:48

fdomn-m · Accepted Answer · 2022-06-08 08:54:38Z

1

The issue is that you're clearing the input before the autocomplete has completed.

From jquery-ui (with emphasis):

select( event, ui )

Triggered when an item is selected from the menu.
The default action is to replace the text field's value with the value of the selected item.
Cancelling this event prevents the value from being updated, but does not prevent the menu from closing.

The process is:

auto-complete select event
which calls your add function which clears the input
auto-complete then sets the input to the selected value as part of the autocomplete process

You can cancel the autocomplete select so that it doesn't update the input:

    select: function(event, ui) {
      addEmailContact(this.id, ui.item.value);
      event.preventDefault();
    }

answered Jun 8, 2022 at 8:54

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery empty input not working with .val('');

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related