Jquery UI autocomplete input - How to check if input is empty on change?

javascript jquery jquery-ui events autocomplete

19,326

Solution 1

http://forum.jquery.com/topic/autocomplete-and-change-event

About the same problem:

I've found the change: does work, but only when the input loses focus.

The solution I implemented, to get the effect I desired was to implement my own check as part of the source: function. I set minLength: to 0, and if the length was less than 2 I loaded my default display data.

Solution 2

Super old question, but I think I found a solution that worked great for me and may help others. So what made it work for me without dancing around autocomplete and what does not seem to have the flaws that change and keypress had, was keyup.

Simply adding keyup event handler next to autocomplete block makes the event fire regardless loosing a focus or changing the field value, even with clearing the value. This makes the feature work in all the cases I could think of. Here's the code:

$('#employeeAutocomplete').keyup(function() {
  if($('#employeeAutocomplete').val() === '') {
     $('#createEmployeeBtn').hide();
  }
});

Solution 3

Take a look at this plugin

http://www.zurb.com/playground/jquery-text-change-custom-event

it's a closer handler for real textchange event

Solution 4

I know this post is really old but i was trying the same think and the answers here didn't pleased me.

So for myself, i did the test of empty value on blur event of jquery.

$('.input').focus(function() { $(this).autocomplete({ // autocomplete code here }) }).blur(function() { if($(this).val() == "") { } });

View more solutions

19,326

Author by

Danny

Updated on June 14, 2022

Comments

Danny almost 2 years
I have a Jquery UI auto complete field on my page, and I need to do something when input becomes empty (i.e The user typed something in, then deleted all of it).

This event must fire regardless of whether what they typed in initially produced autocomplete results.

The point is to show a button if there are no autocomplete results for typed entry, and remove it if there are results OR the input is empty.

UPDATE I have tried this...
```
$('#employeeAutocomplete').change(function() {
     alert("eventFired");
     if($( "#employeeAutocomplete" ).val() == ''){
         $('#createEmployeeBtn').hide();
     }
});
```
And alert is not displayed....

Thanks, Danny
Silkster almost 13 years

probably easier than my answer!
Danny almost 13 years

I tried that, but it doesn't seem to fire...not sure why... $('#employeeAutocomplete').change(function() { if($( "#employeeAutocomplete" ).val() == ''){ $('#createEmployeeBtn').hide(); } }); });
Danny almost 13 years

Hmmm it seems that both .keypress and .change will not play nice with the jquery autocomplete control...
Grigor almost 13 years

do you have jquery library included in the header? try other functions, use firebug to see what the problem is
Grigor almost 13 years

by autocomplete do you mean the field shows the results as you type?
Danny almost 13 years

Yeah had a look at it, seems it is triggered when field is blurred as apposed to when contents are changed.
Danny almost 13 years

Yeah Jquery is definitely there, been using it alot. And yeah thats what i mean by autocomplete.
Grigor almost 13 years

I am sure you would find a solution from google within 5 minutes, just requires research skills.
Juan Jimenez almost 13 years

I've used the plugin above, I posted it as an additional answer for new readers to find it faster
Chris about 11 years

Because the change() event is not fired until the input loses focus.
Charles Robertson over 6 years

Bang on the money. This took me about 5 minutes to implement and works like a charm. None of the other solutions work. Thanks for posting this answer...