Move focus to next input on mouse click in jquery autocomplete item

Question

I have a jQuery autocomplete attached to a textbox, when I select an autocomplete item by pressing enter it focuses the next input. but when I select the item by mouse click it focuses the first input instead of the next input.

My inputs are ASP.Net inputs and each have a tabindex.

So far what I have tried is

jQuery Code :

$("#txtArea").autocomplete({
    source: function (request, response) {
        var outputList = LoadAutocompleteResult(areaNameList, request.term);
        response(outputList);
    },
    close: function () {
        var ti = $("#txtArea").attr('tabindex') + 1;
        $('[tabindex=' + ti + ']').focus();
    }
});

also tried the following

$("#txtArea").autocomplete({
    source: function (request, response) {
        var outputList = LoadAutocompleteResult(areaNameList, request.term);
        response(outputList);
    },
    select: function () {
        var ti = $("#txtArea").attr('tabindex') + 1;
        $('[tabindex=' + ti + ']').focus();
    }
});

Answer 1

Most JavaScript engines will treat:

var ti = $("#txtArea").attr('tabindex') + 1;

as concatenation, not addition, so the ti variable has "1" appended to it's initial value. The solution is to parse ti to a number before attempting to increment it, or to use an operator specifically designed to increment it (which will convert the string to a number in the process).

var ti = parseInt($("#txtArea").attr('tabindex'), 10) + 1;

or

var attr = $("#txtArea").attr('tabindex'),
    ti = attr++; // caveat here is that, if ti = 1, attr will be 2

otherwise you'll be trying to focus $('[tabindex=11]'), instead of $('[tabindex=2]');

Working demo: http://jsfiddle.net/XfPen/