Fixing jQuery autocomplete plugin for Opera browsers

At finnlabs we are using the jQuery library in all current web development projects. JQuery allows for writing the functionality we need in fewer lines of code and thus eases maintainability and minimizes bugs and errors. The great variety of available JQuery plugins offers us the possibility to stand with our JavaScript applications “on the shoulders of giants”.

Autocompletion of text fields is a very common task and thanks to the jQuery autocomplete plugin straight forward to implement for most modern web browsers. It works great in most use cases and has enough hooks and whistles to extend its functionality for individual needs.

Unfortunately all Opera browsers at hand (Version 9.x) show an annoying bug. When the Ajax request returns without results, the suggestion list is removed and the cursor is placed at the beginning of the text input. This is a real burden for power users.

During a quick investigation it turned out, that $.Autocompleter.Selection is causing the trouble. The main purpose of this function is either to select portions of text in the autocompleted input element (when the autoFill option is used) or to place the cursor behind the last character (when an element is selected from the suggestions list). With the help of feature detection the best implementation is selected.

$.Autocompleter.Selection = function(field, start, end) {
    if( field.createTextRange ){
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart("character", start);
        selRange.moveEnd("character", end);
        selRange.select();
    } else if( field.setSelectionRange ){
        field.setSelectionRange(start, end);
    } else {
        if( field.selectionStart ){
            field.selectionStart = start;
            field.selectionEnd = end;
        }
    }
    field.focus();
};

I’m not an expert concerning feature detection. I always try to avoid browser dependent code and use cross-platform libraries instead. Here is no way around, so I started guessing: createTextRange is Microsoft’s approach, setSelectionRange and selectionStart are both the Mozilla way. Opera seems to support createTextRange, but obviously not in the right way, hence the bug. By simply switching priorities and starting to look for setSelectionRange first everything magically started to work fine. Here is our new version:

$.Autocompleter.Selection = function(field, start, end) {
    if( field.setSelectionRange ){
        field.setSelectionRange(start, end);
    } else if( field.createTextRange ){
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart("character", start);
        selRange.moveEnd("character", end);
        selRange.select();
    } else if( field.selectionStart ){
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
};

Sometimes it is that simple.

In order to better track the code changes, we just released the fixed code in our GitHub repository. You can find minimized and packed versions of our updates there as well.