帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

bootstrap4输入框自动补全插件插件

帝国模板之家 2020-12-02 网页特效 评论

插件介绍

这是一款基于bootstrap和js实现的自动完成插件,JavaScript编写。jQuery和bootstrap.min.js是可选的。

使用方法

1. 在html页面中加载bootstrap框架和插件文件。

<!-- Required -->
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="index.js"></script>
<!-- Optional -->
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.min.js"></script>

2.为自动完成列表定义一个数组,当输入字段中输入内容时,该列表将自动显示。

const countries = [
      "Afghanistan",
      "啊land Islands",
      "Albania",
      "Algeria",
      "American Samoa",
      "Andorra",
      "Angola",
      "Anguilla",
      "Antarctica",
      "Antigua and Barbuda",
      "Argentina",
      "Armenia",
      "Aruba",
      "Australia",
      "Austria",
      "Azerbaijan",
      "Bahamas (the)",
      "Bahrain",
      "Bangladesh",
      "Barbados",
      "Belarus",
      "Belgium",
      "Belize",
      "Benin",
      "Bermuda",
      "Bhutan",
      "Bolivia (Plurinational State of)",
      "Bonaire, Sint Eustatius and Saba",
      "Bosnia and Herzegovina",
]

3. 将自动完成功能应用于输入字段,并将默认数组作为第二个参数传递给自动完成函数。

<input id="search" type="text" placeholder="Search countries..." class="form-control" />
var search = document.getElementById('search');
autocomplete(search, countries);
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言