当前位置:主页 > JavsScript库 > 表单 >

javascript的Bootstrap 5自动完成插件
栏目分类:表单   发布日期:2021-09-17   浏览次数:

Bootstrap 5 自动完成组件,可将自动完成列表添加到具有 Bootstrap 样式的输入字段。

使用:

1. 将 JavaScript autocomplete.js 插入到 Bootstrap 5 项目中。

<link rel="stylesheet" href="bootstrap.min.css" />
<script src="autocomplete.js"></script>

2. 为自动完成列表定义一系列建议。

var country_list = ["阿富汗","阿尔巴尼亚","阿尔及利亚", ...];

3. 在您的输入字段旁边创建自动完成列表。

<input class="form-control" id="form" type="text"> 
<div class="position-absolute invisible" id="form_complete"></div>

4. 在输入上启用自动完成列表。就是这样。

set_autocomplete('form', 'form_complete', country_list);

5. 指定触发自动完成列表的字符数。默认值:3。

set_autocomplete('form', 'form_complete', country_list, start_at_letters=2);

6. 指定应显示在结果列表中的结果数。默认值:5。

set_autocomplete('form', 'form_complete', country_list, start_at_letters=2, count_results=3);

官方网站:https://github.com/Denglo/bs5-autocomplete-vanillaJS

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库