默认功能
当您在输入域中输入时,自动完成(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>