Autofill with multiple values

Question

Autofill with multiple values

I tried jQuery autocomplete for multiple values. It works fine, but the only problem is that if I enter a word in the text box, go to the beginning of the text box and enter another word that it adds to the end of the text area, and not to the CARET position. Could you help me?

thank

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>