Wednesday, April 11, 2012

Autocomplete with multiple valuess

I have tried out the jquery autocomplete for multiple values. It works fine but the only problem is that if i enter a word in the textarea then go to the begining of the textarea and enter another word it appends to the end of the text area and not at the CARET position.COuld you please help?



Than You



This is the Code:



 <!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>




No comments:

Post a Comment