Bootstrap Typeahead自动补全

使用Bootstrap Typeahead 组件:

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充。

效果如图所示:

实现方式:

1、引入Bootstrap的相关 Js:

<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.4-dist/css/bootstrap.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

2、引入Typeahead组件:

<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery_autocomplete/bootstrap-typeahead.js"></script>

3、html:

<input type="text" class="form-control"  id="select_company" data-provide="typeahead" data-items="4" placeholder="请输入企业名称">

4、js

var enterprise = [];
$.ajax({
  url : ‘${pageContext.request.contextPath}/dailycheck/getAllCompany‘,
  type : ‘POST‘,
  dataType : ‘JSON‘,
  success : function(data) {
    for (var i = 0; i < data.length; i++) {
      enterprise[i] = data[i].companyName;
    }
  }
});

$("#companyName").typeahead({
  source : enterprise
});

时间: 2024-08-27 17:51:28

Bootstrap Typeahead自动补全的相关文章

【Bootstrap】 typeahead自动补全

typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 <input type="text" data-provide="typeahead"> 通过设置autocomplete="off"来关闭浏览器自带的自动补全功能,以防跟我们的产生冲突. 通过JavaScript 调用$('.typeahe

输入框自动补全功能

在输入框输入信息后,自动提示补全.我选择用typeahead.js,后来发现,原来这个库的相关学习资料很少,搞的稍微有点久,才弄明白点...本文实属原创,如有错误,敬请指教! 简介: 官网:http://twitter.github.io/typeahead.jsgithub: https://github.com/twitter/typeahead.js使用文档:https://www.awesomes.cn/repo/twitter/typeahead-js 在查资料的过程中,不难发现,ty

Linux C/C++程序员CentOS 6.5安装YouCompleteMe使用vim语法自动补全

标题: Linux C/C++程序员CentOS 6.5安装YouCompleteMe使用vim语法自动补全 Ubuntu/Debian/Fedora比较好安装,各种软件包都比较新 CentOS6系列很难装,各种软件包版本太低了 新手不要尝试在CentOS6系上安装,会有一种挫败感! 步骤: 1, 安装操作系统 2, 文件下载 3, 更新vim 4, 安装ycm 和 Vundle 5, 编译clang 6, 编译ycm_core 7, 效果图 8, 清理工作 1, 安装操作系统: CentOS-

表单自动补全功能:

bootstrap的bootstrap-typeahead.js jQuery的autocomplete.js js实现自动补全 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .aut

下拉框、下拉控件之Select2。自动补全的使用

参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com/wangchuanqi/p/5981212.html 参考三:https://www.cnblogs.com/sharpest/p/6117043.html 官网:https://select2.org/ 1.使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络).

VIM的自动补全

自动补全可以很好的提高输入的效率: 触发自动补全的方法总结: 可供弹出式菜单的使用的命令: 其它再补充:

Linux Vim中自动补全Python插件:Pydiction

Pydiction 可以是我们使用Tab键自动补全Python代码在Vim,是一款非常不错的插件. Pydiction不需要安装,所有没有任何依赖包问题,Pydiction主要包含三个文件. python_pydiction.vim  -- Vim plugin that autocompletes Python code. complete-dict         -- Dictionary file of Python keywords, modules, etc. pydiction.p

Ubuntu 16.04.2 LTS 安装python vim自动补全工具pydiction

Pydiction 可以是我们使用Tab键自动补全Python代码在Vim,是一款非常不错的插件. 下载Pydiction mkdir ~/.vim mkidr ~/.vim/tools cd ~/.vim/tools #可以先下载好放到Ubuntu系统中 git clone https://github.com/rkulla/pydiction.git 配置Pydiction #- UNIX/LINUX/OSX: Put python_pydiction.vim in ~/.vim/after

vim 添加php自动补全 并格式化代码

自动补全,修改/etc/vimrc的配置 vim /etc/vimrc 添加: filetype plugin on autocmd FileType php set omnifunc=phpcomplete#CompletePHP 格式化代码:一下是按键 gg shift + v shifg + g = 参考: