Jquery UI学习笔记（10）

最新推荐文章于 2022-06-17 15:24:13 发布

原创最新推荐文章于 2022-06-17 15:24:13 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui #自动补全 #jquery #autocompletion #autocomplete

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了自动补全技术在网站上的应用，包括其工作机制、关键代码实现及实际效果展示。

自动补全(autocompletion)是当前网站上经常使用到的一种机制，以便用户在文本框里刚刚开始输入第一个词时，就可以为他提供一系列相关的输入建议。

<!DOCTYPE>
<html>
	<head>
		<title>自动补全</title>
		<meta charset="utf-8"/>
		<script src="../jquery-ui/jquery-1.9.1.js"></script>
		<script src="../jquery-ui/ui/jquery-ui.js"></script>
		<link rel="stylesheet" href="../jquery-ui/themes/base/jquery-ui.css">
	</head>
	
	<body>
		<h3>Enter the name of the book:</h3>
		<input id="book"/>
				<script>
			var books=["Web development with J2EE",
						"Practical CSS $ JavaScript",
						"Practical Ruby on Rails",
						"Introduction to HTML & CSS",
						"Jquery UI"
			];
			
			$("input#book").autocomplete({
				source:books,//指定用于建议的数据源
				disabled:false,//禁用自动补全机制
				minLength:0,//触发建议列表显示所需的最少输入字符数
				delay:1000,//延时(毫秒),默认是300	
				//建议列表事件
				open:function(event){
					var ul=$(this).autocomplete("widget");
					ul.css("width","300px");//指定建议列表的宽度
				},
				close:function(){},
				search:function(){},//搜索匹配完成后调用
				focus:function(){},//获得焦点时调用
				select:function(){},//选择时调用
				change:function(){},//失去焦点且内容变化时调用
				
				//autocomplete("action",param)方法
				//autocomplete("disable")禁用,enable激活,close隐藏,destroy移除...
				
			}).autocomplete("search","");//打开即显示建议列表
		</script>

</body></html>