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