智能提示 autocomplete

最新推荐文章于 2024-04-25 20:22:26 发布

zqf3940

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量894

点赞数

分类专栏： html 文章标签： html jquery autocomplete

本文链接：https://blog.csdn.net/zh_qf/article/details/13628279

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

zqf3940

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能提示 autocomplete

jQuery UI Example Page $(function() { //第一种方式先把数据传过来 var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdF
复制链接

扫一扫