Focus on input and autocomplete

Question

I have a <div> with contenteditable=true . I attach a blur event so the input get recorded once the user leaves the field:

$(document).on('#my_div'n 'blur', function () {.......

I attach to this field a jquery autocomplete:

$('#my_div').autocomplete({ source : emails_directory   }); 

The autocomplete works well and fills in the field when clicked.

The problem here is that my blur event record only the first letters that I typed before triggering the autocomplete.

What event should I use in order to record the field value if autocomplete isn't used, or the value of the autocomplete if used.

Ex: I want to get test@mail.com from the autocomplete. I type 'te' and the full email displays in the autocomplete. I select it in the autocomplete list and it is filled in the field. My blur event records 'te'. I dont want that and would like to record test@mail.com instead

Ex2: I want to enter a value which is not in the autocomplete source. I type new_email@mail.com, no autocomplete displays. On blur the full value is recorded.

Answer 1

You can trigger keydown event for ENTER on blur. So you can get the autocomplete value if exists:

$(document).on('#my_div', 'blur', function () {
         var keyEvent = $.Event("keydown");
         keyEvent.keyCode = $.ui.keyCode.ENTER;
         $(this).trigger(keyEvent);
         ......
});

and also dont forget autofocus:

$('#my_div').autocomplete(autoFocus: true, { source : emails_directory });