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.