【bootstrap5自动补全(bootstrap5autocomplete)功能介绍】

本文介绍了Bootstrap5autocomplete插件的使用,包括本地和远程数据的自动补全功能,支持axios进行远程调用。详细解析了服务端返回数据格式、前端HTML结构、JavaScript代码实现,并提供了配置选项和默认设置。此外,还展示了如何在实际项目中应用该插件,对于前端开发人员具有一定的参考价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杏雨1969

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值