How do I show autocomplete options for a textarea by pressing the down arrow key using jQuery?

Question

I'm trying allow multiple options to be selected using jQuery autocomplete applied to a textarea field. The code below works fine except that the down arrow key doesn't trigger the autocomplete options to be displayed and be traversable using the arrow keys. This functionality works perfectly when applied to normal input text fields (i.e. not a textarea).

So I'm wondering if anyone can tell me how to get this working for a textarea?

multiselect: {

    split: function (val) {
        return val.split(/;\s*/);
    },

    myField: {

        myOptions : [],

        extractLast : function(term) {
            return multiselect.split(term).pop();
        },

        autocomplete_options : {
            appendTo : 'body',
            minLength : 0,
            source : function(request, response) {
                response($.ui.autocomplete.filter(multiselect.myField.myOptions, multiselect.myField.extractLast(request.term)))
            },
            focus : function() { return false; },
            select : function(e, ui) {
                var terms = multiselect.split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join("; ");
                return false;
            },

        },

        multi_options : function(myOptions)
        {
            multiselect.myField.myOptions = myOptions;
            $('[name=myField]').
                autocomplete(multiselect.myField.autocomplete_options)
                .on("keydown", function(event) {
                    // here is where I've added code to handle the down arrow key press
                });
        },

        unbind : function() {
            $('[name=myField]').autocomplete("destroy")
        }
    }
}

I've tried numerous things in an effort to trigger the autocomplete options. Adding the below code to the keydown event has been the closest I've been able to get i.e. the autocomplete options display but I can't traverse them using the down arrow like I could for a text input field. The up arrow however does work.

if (event.keyCode == 40) {
    $(this).autocomplete('search', '');
}

I suspect I need to add some logic to prevent this logic from intercepting down arrow events when the autocomplete options are open, but nothing I've tried to that end has worked so far.

i.e.

if (event.keyCode == 40 && $('ul-autocomplete').is(':hidden')) {
    $(this).autocomplete('search', '');
}

Does anyone have some suggestions as to how this can be done?

Answer 1

I was able to do this by adding namespace to the keydown event and then turning it off after triggering the autocomplete options, and then turning it back on after the autocomplete options close.

handle_key_down : function (event) {
    if (event.keyCode == 40) {
        $(this).autocomplete('search', '');
        $(this).off('keydown.myField');
    }
}

and this in my multi_options function:

    .on("keydown.myField", multiselect.myField.handle_key_down)
    .on("autocompleteclose", function (event) {
        $(this).on('keydown.myField', multiselect.myField.handle_key_down);
    });

It's not overly pretty but it works.