智能提醒 autocomplete
智能提示 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>