Question

Requirement:

I’d like a jQuery autocomplete element that allows the user to pick an item and set the display field and a hidden field with the selected value. But I would also like the field and the hidden field to be cleared when the input field receives focus by the user.

Problem:

The problem I’m facing is that when the user selects an item it’s almost like jQuery is executing the onSelect function and then sending the focus to the input field again which fires my focus() event (and therefore clearing my selection).

Problem Browser:

IE8 , works in Chrome. Did not try others.

Attempted fixes:

• I have tried setting the focus to another element in the select()
  function. It did put the focus on that element but only after
  focussing on the input field
• Tried both event.preventDefault() and event.stopPropagation() in the
  select() method. Did not work.
• Blur didnt work either.

Workarounds:

I guess I can change the clearing to be on click instead of on focus, but this is not what I want.

Similar stackoverflow thread:

jquery autocomplete remove focus after suggest

Code:
Here is my code:

$(function () {
    $("#autosuggest").autocomplete({
        source: "my server path",
        minLength: 3,
        select: function (event, ui) {
            if (ui.item) {
                $("#autosuggest").val(ui.item.value);                    
                $("#hidden").val(ui.item.id);                                                                                
            }
        }
    });
    $("#autosuggest").focus(function () {
        $("#hidden").val("");
        this.value = "";
    });

});

Answer 1

The problem is: when you click on an autocomplete suggestion, the focus shifts to that dropdown menu, ever so shortly, to return to your input afterwards. Do you still get this problem if you choose the autocomplete suggestion by using the arrow-down button? If you do not, then this is the problem.

The only way I can see to fix this is not to make it a focus event after all, but I think I know why you don’t want to make it a click event: you also want to capture tabbing into the field.

Solution: make it a click handler, and add a ‘keyup’ handler that executes the click handler handler if the key was a tab (arrow-down etc are still allowed).