bootstrap5自动补全(bootstrap5autocomplete)
bootstrap5autocomplete可对中英文数字进行自动补全操作,支持本地数据与远程验证,本地自动补全可多参数参与(注:新增功能)
在这个bootstrap4AndBootstrap5autocomplete中包含了四个文件
- autocomplete-kcxh.js 此文件为调用bootstrap5autocomplete.js范本
- bootstrap5autocomplete.js 自动补全原文件
- bootstrap5autocomplete.min.js 自动补全压缩文件
- example.html HTML范本
注:原文件没有远程调用,只是本地数据调用如需远程调用见–2.2.2、服务器端路由Example
自动补全效果如下:(注下图效果为远程调用)
1.1、bootstrap5autocomplete.js
bootstrap5autocomplete 是对bootstrap4autocomplete 的重写增加了中英文数字的本地与远程自动补全
如果使用bootstrap4 只需要修改 _field.removeAttr(‘data-bs-toggle’);为_field.removeAttr(‘data-toggle’)
_field.attr(‘data-bs-toggle’, ‘dropdown’);为_field.attr(‘data-toggle’, ‘dropdown’);
本例使用版本为:bootstrap5.13 此处暂定文件名为:bootstrap5autocomplete.js。autocomplete-kcxh.js为调用bootstrap5autocomplete.js
脚本程序。
1.2、bootstrap5autocomplete.min.js方件大小
bootstrap5autocomplete.min.js文件大小只有5.05 KB (5,174 字节)
2、bootstrap5autocomplete.js功能介绍
2.1、增加了axios远程自动补全功能
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
2.2 服务端返回数据格式与服务器端路由
2.2.1、服务器端返回数据格式
2.2.1.1、返回成功数据格式
{code: 200, message: '考生正常,可以预约', resultset: Array(2)}
2.2.2.2、返回成功resultset数据格式
resultset: [{kcmc: '海南考场', kcxh: '63010201'},
{kcmc: '大陆考场', kcxh: '63010202'}]
2.2.1.3、返回失败数据格式
{code: 0, message: '不存在,请检查考试地点是否正确'}
2.2.2、服务器端路由Example
vaildRouter.post('/complete-kcxh', (req, res) => {
const token = req.headers.authorization;
const { xh } = req.body;
if (!xh || typeof (xh) === 'undefined' || xh.length == 0) {
return;
}
//验证token
if (verifyToken(token)) {
var selectSql;
if (xh != '') {
if (xh.indexOf("\\\\") != -1) {
xh = xh.replaceAll("\\\\", "\\\\\\\\");
}
if (xh.indexOf("_") != -1) {
xh = xh.replaceAll("_", "\\\\_");
}
if (xh.indexOf("%") != -1) {
xh = xh.replaceAll("%", "\\\\%");
}
if (!isNaN(parseInt(xh)) && isFinite(xh)) {
//如果为数字大于等于3个数字在查询数据库,避免数据库频繁调用
if (xh.length >= 3) {
//数据库模糊查询
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [xh], [kcmc] FROM layout_17c01 WHERE [xh] like' + "'" + "%" + xh + "%" + "'";
} else {
return;
}
} else {
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [kcmc],[xh] FROM layout_17c01 WHERE [kcmc] like' + "'" + "%" + xh + "%" + "'";
}
}
if (selectSql != "") {
db.sql(selectSql, (err, result) => {
if (err) {
console.log(err);
} else {
if (result.recordset.length == 0) {
var message = '不存在'
return res.send(new failed(message));
} else {
//var resultset = JSON.stringify(result.recordset);
var resultset = result.recordset;
var message = '考生正常,可以预约';
console.log(resultset)
return res.send(new successSet(message, resultset));
}
}
});
}
} else {
return res.send(new failed('token验证失败'));
}
});
2.3 html数据格式
<div class="row mb-3 mt-3">
<label for="ksdd" class="col-sm-3 col-form-label">考试地点</label>
<div class="col-sm-9">
<input type="text" class="form-control autocomplete" id="ksdd" name="ksdd" autocomplete="off">
</div>
<div id="kcxhoutput"></div>
</div>
2.4 前端数据格式
var srco = [
{
"xh": "63010400",
"kcmc": "西宁考场"
},
{
"xh": "63010401",
"kcmc": "海东考场"
},
{
"xh": "63010402",
"kcmc": "海西考场"
},
{
"xh": "63010403",
"kcmc": "海南考场"
},
{
"xh": "63010404",
"kcmc": "海北考场"
},
{
"xh": "63010405",
"kcmc": "祁连考场"
},
{
"xh": "63010406",
"kcmc": "大通考场"
},
{
"xh": "63010407",
"kcmc": "贵德考场"
},
{
"xh": "63010408",
"kcmc": "黄南考场"
}
]
2.5 前端下拉框点选信息显示
function onSelectItemkcxh(item, kcxhIup) {
//删除item.value与item.label相同字符返回一个新的字符串
if (item.value.length == 0 || item.label.length == 0) {
return;
} else {
//提取item.label中的数字
var labelnum = item.label.replace(/[^0-9]/ig, "")
//提取 item.label中的字符串
var labelstr = item.label.replace(/[^\u4E00-\u9FA5]/g, '')
//以下可切换数字与字符串在输入框中的显示
if (!isNaN(parseInt(item.value)) && isFinite(item.value)) {
if (item.label) {
kcxhIup.value = labelnum.trim();
$('#kcxhoutput').html(
`<b class="text-success">考场所在地区:${labelstr}</b>`
);
}else{return;}
} else {
if (item.label && item.value) {
kcxhIup.value = labelstr.trim();
$('#kcxhoutput').html(
`<b class="text-danger">请点击输入框导入:${labelnum}</b>`
);
}else{return;}
}
}
}
3、如何使用
3.1、简单使用
假设你有一个id为“myAutocomplete”的文本框,你可以:
$("#myAutocomplete").autocomplete(options);
3.2、使用样本
$('#kcxh').autocomplete({
source: srco, //前端自动补全数据(可空)
label: 'kcmc', //考场名称(数据标签名称)
value: 'kcdddh',//考场地址代码(数据值名称)
axiosdata:true,//后端自动补全axios开/false关
threshold: 1, //输入框自动触发门阈值(检测到一个字符就比对)
rtnInfo: true, //返回错误信息显示
highlightTyped: true,//如果为true则下拉框文字高亮显示
onSelectItem: onSelectItem,//前端下拉框点选信息显示
highlightClass: 'text-danger',//高亮属性
showValue: false, //为true则显示值
showValueBeforeLabel: false,//如果为true则显示的值在前面
method: 'POST',//axios请求方式
url: "/valid/valid-17C08-ksdd",//axios请求地址
timeout: 1000, //axios超时时间起作用必须实例化一下axios
retry: 3, //axios请求超时重新发起请求次数
retryDelay: 1000 //axios失败请求之间等待的毫秒数(默认为 1);重新发起请求间隔
});
4、选项
选项是具有以下属性的 JSON 对象:
axiospara:
新增加工能加带多个参数请求后台,前端求请数据格式示例代码如下:
const xh = document.querySelector('input[name=xh]');
const sfzmhm = document.querySelector('input[name=sfzmhm]');
const xm = document.querySelector('input[name=xm]');
const dlr = document.querySelector('input[name=dlr]');
const kchp = document.querySelector('input[name=kchp]');
obj = {
xh: xh.value,
sfzmhm: sfzmhm.value,
xm: xm.value,
dlr: dlr.value,
kchp: kchp.value
};
source:
自动完成将从中查找要显示的项目的数据。此数据可以是简单对象,也可以是 JSON 对象数组。默认情况下,数组中每个对象的格式如下所示,但您也可以更改标签和值键的名称(见下文):
{“label”: “This is a text”, “value”: 42}
下拉列表选项:
它与Bootstrap的下拉列表中的选项相同,记录在此处.
dropdownClass:
下拉菜单元素的类,它是显示的框。可以采用字符串或字符串数组。
highlightClass:
在项目上突出显示键入的文本时要使用的类。仅当突出显示类型为 true 时使用。默认值为文本主。可以采用字符串或字符串数组。
highlightTyped:
是否突出显示项目上的键入文本(设置样式)。默认值为 false。
label:
数据中键的名称。标签是将在自动完成列表中的每个项目上显示的内容。label
maximumItems:
显示自动完成时要显示的项目数。默认值为 5。设置为 0 可显示所有可用项目。
onSelectItem:
每次选择某个项目时都会触发的回调。它接收以下格式的对象:
{label:
showValue:
如果设置为 true,将在下拉列表中的标签后显示条目的值。
showValueBeforeLabel:
如果设置为 true 并且也设置为 true,则该值将显示在标签之前。showValue
threshold:
为了触发自动完成,需要在输入上键入的字符数。默认值为 2。
value:
数据中键的名称。value
method:
axios请求方式。本例 method: ‘POST’
url:
axios请求地址。本例 url: “/valid/valid-17C08-kcxh”
timeout:
axios超时时间。本例 axios timeout: 1000 (单位)毫秒
retry:
axios请求超时重新发起请求次数 本例 retry: 3 (单位)次
retryDelay:
axios失败请求之间等待的毫秒数;重新发起请求间隔 本例 retryDelay: 1000 (单位)毫秒
5、默认选项
var defaults = {
axiospara: false,//默认带参数关
threshold: 2,//输入文字阈值默认2个字符
axiosdata: false,//axios远程请求开关
axiospara: false,//axios远程请求带参数
maximumItems: 5,//最大显示条数
rtnInfo: false,//返回信息开关
highlightTyped: false,//如果为true则下拉框文字高亮显示
highlightClass: 'text-primary',
showValue: false, //为true则显示值
showValueBeforeLabel: false,//如果为true则显示的值在前面
};
threshold:
输入文字阈值(默认)2个字符
axiosdata
axios远程请求开关(默认)false
maximumItems:
最大显示条数(默认)5
rtnInfo:
返回错误信息开关(默认)false
highlightTyped:
下拉框文字高亮显示(默认)false
highlightClass:
Bootstrap 高亮文本样式(默认)text-primary
showValue:
则显示值(默认)false
showValueBeforeLabel:
显示的值在前面(默认)false