複数の値に対して jQuery オートコンプリートを試しました。それは正常に動作しますが、唯一の問題は、テキストエリアに単語を入力すると、テキストエリアの先頭に移動して別の単語を入力すると、CARET の位置ではなく、テキストエリアの最後に追加されることです。
ありがとうございました
これはコードです：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
// document.domain = "toitl.com";
// alert(document.domain);
</script>
<title>Form Field Clear</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-
ui.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript" src='../../../../libuser/toitldocumentdomain.js'>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<meta charset="utf-8">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete"
).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term )
) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( " " );
return false;
}
});
});
</script>
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<textarea id="tags" cols="50" ></textarea>
</div>
</div>
</body>
</html>