Is it possible to get autocomplete for a rails application in text editors, not only text fields
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-e开发者_如何学Cxpression) 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?
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.
- Search only when the substring (_leftMatch) before the cursor position matches the defined regexpression (in my example
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
.
What about using jquery ui autocomplete with custom search function. Assuming that your text-area's id is #birds:
// search only, if the regexp matches
$("#birds").autocomplete({
source: "/birds/search",
minLength: 2,
select: function( event, ui ) {alert("completing "+ui.item.value);}
search:function(){/\W:\w+$/.test($(ui.item.value).val())}
})
Now you just still have to implement that search on server side...Perhaps you could adapt the search later on, to only transfer the word instead of the whole textarea value...
精彩评论