使用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 , 数据源有多种写法,这里以数组作为范例

$(function() {

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

});

使用Jquery autocomplete组件:

1、引入Jquery autocomplete组件:详情可访问http://jqueryui.com/autocomplete/  官方网址

<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery_autocomplete/jquery.autocomplete.min.js"></script>
<script src="${pageContext.request.contextPath}/static/jquery-ui/ui/jquery.ui.core.js"></script>
<script src="${pageContext.request.contextPath}/static/jquery-ui/ui/jquery.ui.widget.js"></script>
<script src="${pageContext.request.contextPath}/static/jquery-ui/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-ui/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery_autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-ui/demos.css">

2、html:

<input type="text"  id="select_company" placeholder="请输入企业名称">

3、js

$(function() {
  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;
      }
    }
  });

  $('#select_company').autocomplete({
    source : enterprise
  });

 
});

Bootstrap Typeahead/Jquery autocomplete自动补全的更多相关文章

  1. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  2. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  3. jquery autocomplete自动补全

    简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...

  4. Autocomplete 自动补全(Webform实战篇)

    开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

  5. jquery实现自动补全邮箱地址

    开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...

  6. angular-ui-bootstrap typeahead 智能提示 自动补全 获取焦点不触发问题的解决

    项目中有一处使用了angular-ui-bootstrap中的typeahead来实现输入框智能提示语自动化补全的功能,存在一个bug, 即输入文字后,当再次点击文本框,其获取焦点后并不会触发智能提示 ...

  7. Pig autocomplete 自动补全

    在pig的grunt环境下,按TAB键可以自动补全命令,用户可以添加自己的补全信息. 在conf目录下创建autocomplete文件,添加如下内容: hdfs://vm1:8020/   在grun ...

  8. jquery.autocomplete自动补齐和自定义格式

    1.简单的下拉自动补齐,可以使用本地或远程数据源 <input name="autoTag" id="autoTag" /> var source ...

  9. jQuery邮箱自动补全代码

    JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...

随机推荐

  1. Laravel学习笔记(一)安装配置开发环境

    摘要 Laravel的目标是给开发者创造一个愉快的开发过程,并且不牺牲应用的功能性.快乐的开发者才能创造最棒的代码!为了这个目的,开发者博取众框架之长处集中到Laravel中,这些框架甚至是基于Rub ...

  2. [Effective JavaScript 笔记]第5章:数组和字典--个人总结

    前言 这节里其实一直都在讨论对象这个在js中的万能的数据结构.对象可以表式为多种的形式,表示为字典和数组之间的区别.更多的我觉得这章讨论多的是一些对应实现功能的相关操作,有可能出现的bug以及如何避免 ...

  3. csu 10月 月赛 I 题 The Contest

    Description 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛有n个题目,每个题目都有一个价值Pi和相对能力消耗Wi,但是有些题目因为太坑不能同时 ...

  4. 使用SQLCipher加密数据库

      Xcode中集成了免费的sqlite,但是不提供加密的模块,突然有一天,蛋疼的客户要求把数据进行加密,于是乎就寻找使用简单并且可以把数据迁移过度到加密数据库的框架. SQLCipher是第三方的开 ...

  5. c语言各类问题 代码

    定义一个结构体,有两个成员变量,一个整型的n,一个字符型的c,利用结构体类型声明一个具有5个元素的数组,并随机初始化,根据成员变量n进行从小到大排序,然后输出 冒泡排序然后 在输出结构体#includ ...

  6. struts2上传下载

    struts上传下载必须引入两个jar文件: commons-fileupload-x.x.x.jar和comons-io-x.x.x.jar上传文件 import java.io.BufferedI ...

  7. js中的一元运算符

    一元运算符只有一个参数,即要操作的对象或值.它们是 ECMAScript 中最简单的运算符. delete delete 运算符删除对以前定义的对象属性或方法的引用.例如: var o = new O ...

  8. Datatable转换为Json

    /// <summary> /// Datatable转换为Json /// </summary> /// <param name="table"&g ...

  9. Kafka:ZK+Kafka+Spark Streaming集群环境搭建(十六)Structured Streaming中ForeachSink的用法

    Structured Streaming默认支持的sink类型有File sink,Foreach sink,Console sink,Memory sink. ForeachWriter实现: 以写 ...

  10. logstash 的 配置文件

    [root@--- etc]# cat test_front_console.conf input { beats { type => beats port => } } filter { ...