Já bych to viděl nějak takhle:
<!doctype html>
<html>
<head>
<title>
Test
</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
(function($) {
$.fn.complete = function(params) {
params = $.extend({
words: [],
key: 9,
callback: $.noop
}, params);
var $area = this.keydown(function(event) {
if (event.which == params.key) {
var
value = $.trim($area.val()),
similar = [];
if (value) {
var text = value.split(' ').slice(-1)[0].toLowerCase();
$.each(params.words, function(id, word) {
if (
word.length > text.length &&
word.slice(0, text.length).toLowerCase() == text &&
$.inArray(text, similar) == -1
)
similar.push(word);
});
}
params.callback(similar.sort());
return false;
}
});
};
}(jQuery));
$(function() {
$('textarea').complete({
words: [
'Nula',
'Jedna',
'Dvě',
'Tři',
'Čtyři',
'Pět',
'Šest',
'Sedm',
'Osm',
'Devět',
'Deset',
'Jedenáct',
'Dvanáct',
'Třináct',
'Čtrnáct',
'Patnáct',
'Šestnáct',
'Sedmnáct',
'Osmnáct',
'Devatenáct',
'Dvacet'
],
callback: function(words) {
var $words = $('select').empty();
words.map(function(word) {
$words.append('<option>' + word + '</option>');
});
var $options = $('option', $words);
if ($options.length) {
$options.eq(0).attr('selected', true);
if ($options.length == 1)
$words.trigger('dblclick');
else
$words.show().focus();
}
}
});
$('select').bind({
dblclick: function() {
var
$area = $('textarea'),
$words = $('select'),
value = $.trim($area.val()),
last = value.split(' ').slice(-1)[0],
word = $words.val(),
lowerCase = $.inArray(last[0], 'aábcčdďeéfghiíjklmnňoópqrřsštťůúvwxyýzž') != -1;
word = word[0][lowerCase ? 'toLowerCase' : 'toUpperCase']() + word.slice(1);
value = value.slice(0, value.length - last.length) + word;
$area.val(value).focus();
},
keydown: function(event) {
switch(event.which) {
case 13:
$(this).trigger('dblclick');
break;
case 27:
$('textarea').focus();
break;
default:
return true;
}
return false;
},
blur: function() {
$(this).hide();
}
});
});
</script>
</head>
<style>
textarea, select {
width: 300px;
}
select {
display: none;
}
</style>
<body>
<textarea></textarea>
<br />
<select size="4"></select>
</body>
</html>
Místo selectu můžeš snadno použít nějaké vlastní menu pro výběr slov, ten select jsem tam dal pro ukázku.