jQuery UI 自动完成（Autocomplete）及动态添加html时绑定Autocomplete

最新推荐文章于 2022-05-10 23:07:20 发布

江小白写bug

最新推荐文章于 2022-05-10 23:07:20 发布

阅读量1k

点赞数

分类专栏： HTML jquery

本文链接：https://blog.csdn.net/qq_25623257/article/details/93491783

版权

HTML 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

jquery

18 篇文章 0 订阅

订阅专栏

默认功能

当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "瓜" 尝试一下，可以得到西瓜或黄瓜。

数据源是一个简单的 JavaScript 数组，使用 source 选项提供给部件。

另外该插件支持ajax动态一步获取数据，详情去移步：

https://blog.csdn.net/v_123/article/details/81171081

代码实现下图：

源码如下：

链接: https://pan.baidu.com/s/1p6k5szSbmPi180WDEnHcXw 提取码: kweu

复制这段内容后打开百度网盘手机App，操作更方便哦

<!doctype html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
	  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
	  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
	  <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
	  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
	  <script>
		//初始化数据源
		var availableTags = ["Aacsxxs", "aaaaa", "BBBBB", "bbbbb", "西瓜", "西葫芦", "黄瓜", "苹果", "ppppP"];
		//初始化数据绑定
		$(function() {
			$("#tags").autocomplete({
				source: availableTags
			});
		});
		//动态添加html
		function addHtmls() {
			var numtemp = $("#num").val();
			var num = Number(numtemp) + 1;
			if (num > 10) {
				alert("温馨提示：材料添加已达上限，最多添加10个！");
			} else {
				$("#ds").after("<div  class='ui-widget' class='nums" + num + "'> <label for='tags' >材料名称：</label><input class='tags'><span style='color:red;' onclick=\"delHtmls(this)\"><删除></span></div>");
				$(".tags").attr("class", "tags" + num);
				//动态绑定数据
				$(".tags" + num).autocomplete({
						source: availableTags
				});
				//计数
				$("#num").val(num);
			}
		}
		function delHtmls(id) {
			$(id).parent().remove();
			var numtemp = $("#num").val();
			var num = Number(numtemp) - 1;
			$("#num").val(num);
		}
	  </script>
	</head>
	<body>
	  所有材料名称：Aacsxxs，aaaaa，BBBBB，bbbbb，西瓜，西葫芦，黄瓜，苹果，ppppP 
	  <div class="nums1" id="ds"> 
		   <label for="tags">材料名称：</label>
		   <input id="tags" /> 
	  </div> 
	  <button type="button" onclick="addHtmls()">添加材料</button>
	  <br /> 
	  已添加材料数： <input id="num" value="1" style="width:30px;border:0px;" />
	</body>
</html>

江小白写bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI 自动完成（Autocomplete）及动态添加html时绑定Autocomplete

默认功能当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "瓜" 尝试一下，可以得到西瓜或黄瓜。数据源是一个简单的 JavaScript 数组，使用 source 选项提供给部件。另外该插件支持ajax动态一步获取数据，详情去移步：https://blog.csdn.net/v_123/articl...
复制链接

扫一扫