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

admin管理员组

文章数量:1202815

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

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

• javascript
• jquery
• jquery-ui
• events
• autocomplete

Share Improve this question Follow edited Jul 27, 2011 at 21:58 Danny asked Jul 27, 2011 at 21:47 DannyDanny 1,33144 gold badges1313 silver badges1616 bronze badges

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 6

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.

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();
  }
});

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

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() == "") { } });

Hope this helps you :) .change() - jQuery API

try keypress

.keypress() - jQuery API

$('#employeeAutocomplete').change(function() {
     alert("eventFired");
     if(this.value == ''){
         $('#createEmployeeBtn').hide();
     }
});

jquery ui's autocomplete has his own change event, have you tried it?

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});

http://jqueryui.com/demos/autocomplete/#event-change

I have solved this issue with autocomplete close event ! Close fired when result list is empty. Im my case this correspond with an empty input field.

http://jqueryui.com/demos/autocomplete/#event-close

OK people. The following definitely works and is an amazingly simple & elegant solution, requiring a couple of lines of code.

100% guaranteed to work.

@Milox has already mentioned it:

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

This jQuery plugin is tiny. Once you download/copy it & link to the 'js' file, use the following:

jQuery('#input').bind('notext',function () {
    console.log('text field is empty');
});

There are other configuarations, but this was all I needed. Boom. Sorted.

本文标签： javascriptJquery UI autocomplete inputHow to check if input is empty on changeStack Overflow