Is it possible to get autocomplete for a rails application in text editors, not only text fields

autocomplete, editor, javascript, ruby-on-rails

Solution

The answer of abstraktor gave me a good starting point, but there were some missing parts. So I developed an example on github: jquery-autocomplete-inner

Here is the complete source code of the example (no HTML), and some explanation:

$().ready(function() {
// search only, if the regexp matches
var cities = [
    "Amsterdam", "Stuttgart", "Singapore", "Madrid", "Barcelona", "Hamburg",
    "Esslingen", "Berlin", "Frankfurt", "Essingen", "Straßburg", "London",
    "Hannover", "Weil am Rhein", "Tuttlingen", "München", "Marsaille", "Paris",
    "Manchester", "Rome", "Neapel", "New York", "Brasil", "Rio de Janeiro"
];
// Defines for the example the match to take which is any word (with Umlauts!!).
function _leftMatch(string, area) {
    return string.substring(0, area.selectionStart).match(/[\wäöüÄÖÜß]+$/)
}

function _setCursorPosition(area, pos) {
    if (area.setSelectionRange) {
        area.setSelectionRange(pos, pos);
    } else if (area.createTextRange) {
        var range = area.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

$("#citites").autocomplete({
    position: { my : "right top", at: "right bottom" },
    source: function(request, response) {
        var str = _leftMatch(request.term, $("#citites")[0]);
        str = (str != null) ? str[0] : "";
        response($.ui.autocomplete.filter(
                cities, str));
    },
    //minLength: 2,  // does have no effect, regexpression is used instead
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    // Insert the match inside the ui element at the current position by replacing the matching substring
    select: function(event, ui) {
        //alert("completing "+ui.item.value);},
        var m = _leftMatch(this.value, this)[0];
        var beg = this.value.substring(0, this.selectionStart - m.length);
        this.value = beg + ui.item.value + this.value.substring(this.selectionStart, this.value.length);
        var pos = beg.length + ui.item.value.length;
        _setCursorPosition(this, pos);
        return false;
    },
    search:function(event, ui) {
        var m = _leftMatch(this.value, this);
        return (m != null )
    }
});
})

- First the data of the examples, some cities (mostly German)

- A helper function to extract the matching substring left from the cursor, named _leftMatch

- A helper function copied mostly from jQuery Set Cursor Position in Text Area

- Then in the usage of autocomplete the following points:

- Search only when the substring (_leftMatch) before the cursor position matches the defined regexpression (in my example `/[\wäöüÄÖÜß]+$/` --> all german work characters).

- Filter the source things by using the request - response variation and filtering there by the substring (as in the other examples of autocomplete with multiple values

- Replace the matching substring with the selection from the user and ensure that the cursor is positioned right after that.

If you want to take a look, download the zip-file from the GitHup repository and start the local example under `examples/cities-local.html`.

Problem

I have searched a lot, but did not find anything useful, so I just ask. The context is Rails 2.3.x, the usual javascript libraries. I would like to reach the following: - I would like to have something similar to `<%= text_field_with_auto_complete :recipe, :name %>` but on text editors: `<%= text_editor_with_auto_complete :recipe, :description, '\w+\:\w+' %>` - It should be customizable (best by a reg-expression) when to start auto-complete. So instead of starting for the whole contents, I would like to start on `\w+\:\w+` which means: start calling auto-complete when a string is entered that starts with non-space characters followed by a ':' sign which is followed by non-space characters. - The replacement should be done only on the string that matches the reg-expression of course. Do you know any solution that could be adapted to my needs?

Original source

Related problems