具有多个值的自动完成功能

时间:2012-04-11 07:13:32

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

我已经尝试了多个值的jQuery自动完成功能。它工作正常但唯一的问题是,如果我在textarea中输入一个单词然后转到textarea的开头并输入另一个单词,它附加到文本区域的末尾而不是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>

0 个答案:

没有答案