【 与百度搜索相同的bootstrap4与5自动补全功能（autocomplete）】

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)}
1

2.2.2.2、返回成功resultset数据格式

resultset: [{kcmc: '海南考场', kcxh: '63010201'}， 
            {kcmc: '大陆考场', kcxh: '63010202'}]
1
2

2.2.1.3、返回失败数据格式

{code: 0, message: '不存在，请检查考试地点是否正确'}
1

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验证失败'));
 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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>

1
2
3
4
5
6
7
8

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": "黄南考场"
    }
   

]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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(
                    `考场所在地区:${labelstr}`
                );
            }else{return;}
        } else {
            if (item.label && item.value) {
                kcxhIup.value = labelstr.trim();
                $('#kcxhoutput').html(
                    `请点击输入框导入:${labelnum}`
                );
            }else{return;}
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、如何使用

3.1、简单使用

假设你有一个id为“myAutocomplete”的文本框，你可以:

$("#myAutocomplete").autocomplete(options);
1

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）;重新发起请求间隔

  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
};
1
2
3
4
5
6
7
8
9
10
11
12

source:
自动完成将从中查找要显示的项目的数据。此数据可以是简单对象，也可以是 JSON 对象数组。默认情况下，数组中每个对象的格式如下所示，但您也可以更改标签和值键的名称（见下文）：

{“label”: “This is a text”, “value”: 42}

下拉列表选项：
它与Bootstrap的下拉列表中的选项相同，记录在此处.

dropdownClass：
下拉菜单元素的类，它是显示的框。可以采用字符串或字符串数组。

highlightClass:
在项目上突出显示键入的文本时要使用的类。仅当突出显示类型为 true 时使用。默认值为文本主。可以采用字符串或字符串数组。

highlightTyped:
是否突出显示项目上的键入文本（设置样式）。默认值为 false。

label:
数据中键的名称。标签是将在自动完成列表中的每个项目上显示的内容。label

maximumItems:
显示自动完成时要显示的项目数。默认值为 5。设置为 0 可显示所有可用项目。

onSelectItem:
每次选择某个项目时都会触发的回调。它接收以下格式的对象：
{label: , value: }

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则显示的值在前面
  };
1
2
3
4
5
6
7
8
9
10
11
12

threshold:
输入文字阈值（默认）2个字符

axiosdata
axios远程请求开关（默认）false

maximumItems:
最大显示条数（默认）5

rtnInfo:
返回错误信息开关（默认）false

highlightTyped:
下拉框文字高亮显示（默认）false

highlightClass:
Bootstrap 高亮文本样式（默认）text-primary

showValue:
则显示值（默认）false

showValueBeforeLabel:
显示的值在前面（默认）false