自动填充输入框： 适用数据源数据大，且需要根据输入查询并选择数据的情景。
示例.gif
演示版本
<html>
<head>
<!--bootstrap css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" crossorigin="anonymous">
<!--jquery js-->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<!--bootstrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js" crossorigin="anonymous"></script>
</head>
<body>
<p>
<input id="name"/>
</p>
<script type="text/javascript">
$("#name").autocomplete({
minLength: 3, //输入3个字符后 再开始匹配
select: function (event, ui) {
console.log(JSON.stringify(ui));
console.log($(event.target).val()); //获取输入框对象
},
source: function (request, response) {
// 这里可以用ajax调用接口，查询和输入匹配的结果 request.term可以获取文本框输入的内容
var result = [
{label: '你好', value: 'hello',att1:'nihao'}, // label为 下拉列表中展示的，value为选中后输入框显示的 还可自定义其他属性，在select事件中都可以获取到
{label: '再见', value: 'bye',att1:'zaijian'},
];
response(result);
}
})
</script>
</body>
</html>
ajax动态查询版本
<html>
<head>
<!--bootstrap css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" crossorigin="anonymous">
<!--jquery js-->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<!--bootstrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js" crossorigin="anonymous"></script>
</head>
<body>
<p>
<input id="name"/>
</p>
<script type="text/javascript">
$("#name").autocomplete({
minLength: 3, //输入3个字符后 再开始匹配
select: function (event, ui) {
console.log(JSON.stringify(ui));
console.log($(event.target).val()); //获取输入框对象
},
source: function (request, response) {
$.ajax({
url: "xxxx",
data: {"param": request.term},
type: 'GET',
success: function (data) {
var result = data.rows.map(function (item) {
return {label: item.itCode, value: item.itCode, real: item.id}
});
response(result);
}
});
}
})
</script>
</body>
</html>
PS：用的时候有需要注意的坑
- 如果在bootstrap的模态窗体使用autocomplete，则输入框的下拉列表无法展示，被模态窗口给挡住了，解决方案就是将autocomplete的下拉列表z-index样式设置的更大
.ui-autocomplete {
z-index: 9999;
}
2.如果页面中使用到bootstrap-datetimepicker，则日期选择框的样式会被打乱，解决方案是将jquery-ui.js中关于datetimepicker相关的操作删除掉。可以点击链接下载去掉后的jquery-ui.js
网友评论