JS自动补全

浏览数：23 / 时间：2015年06月09日

<!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" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<title>无标题文档</title>
</head>
   <script>
   $(function() {
       var availableTags = [
       "ActionScript",
       "AppleScript",
       "Asp",
       "BASIC",
       "C",
       "C++",
       "Clojure",
       "COBOL高",
       "ColdFusion",
       "Erlang",
       "Fortran",
       "Groovy",
       "Haskell",
       "Java",
       "JavaScript",
       "Lisp",
       "Per高l",
       "PHP",
       "Python",
       "Ruby",
       "Scala",
       "Sche高"
       ];

       $( "#tags1" ).autocomplete({
           source: availableTags
       });

       $("#tags2").autocomplete({
           source: ["a", "b", "c"]
       });

       //页面加载
       $("#tags3").autocomplete({
           source: DataSouce1()
       });

       //数据库
       $("#tags4").autocomplete({
           source: function( request, response ) {
               var name=$.ui.autocomplete.escapeRegex( request.term );
               response( $.grep( DataSouce2(name), function( item ){
                   return item;
               }) );
           }
       });

       //利用ajax页面加载就获取到数据源
       function DataSouce1()
       {
           var mycars=new Array()
           for (var i = 0; i <100; i++) {
               mycars[i]="高"+i;
           };
           return mycars;
       }

       //利用ajax根据输入的到数据库查找相当于
       function DataSouce2(name)
       {
           var mycars=new Array()
           for (var i = 0; i <100; i++) {
               mycars[i]=name+"_"+i;
           };
           return mycars;
       }

   });
</script>
</head>
<body>
   <div class="ui-widget">
       <label for="tags">Tags: </label>
       <input id="tags1" />
       <input id="tags2" />
       <input id="tags3" />
       <input id="tags4" />
   </div>
</body>
</html>