智能提醒 autocomplete _Web前端

智能提示 autocomplete
<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
	<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"
		];
		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});
		//第二种方式ajax获取
		 var cache = {};//缓存
        $( "#cause" ).autocomplete({//autocomplete插件
        	content:{},
            source: function(request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( $.map( cache[ term ], function( item ) {
                       	return item.content;
                    }));
                    return ;
                }
                $.ajax({
                    url: "${path}/cause/ajaxSearch.do",
                    dataType: "json",
                    data:"type="+$("#type").val()+"&content="+request.term+"&date="+new Date(),
                    success: function( data ) {
                        cache[ term ] = data;
                        response( $.map( data, function( item ) {
                           	return item.content;
                        }));
                    }
                });
            }
        });
	});
	</script>
</head>
<body> 
<div>
	<input id="autocomplete" >
	<input id="cause" name="cause"  style="width:425px;">
</div>
</body>
</html>