zoukankan      html  css  js  c++  java
  • Bootstrap Typeahead/Jquery autocomplete自动补全

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

     
    });
  • 相关阅读:
    qt用mingw编译时报错 multiple definition of
    作用域详解
    webpack-dev-server
    前端致命错误汇总
    那些我不知道的基础知识
    常见英语词汇第一记
    CSS权重;慎用!important
    校验正确获取对象或者数组的属性方法(babel-plugin-idx/_.get)
    同源策略
    用CSS实现梯形图标
  • 原文地址:https://www.cnblogs.com/chenrunlin/p/4935853.html
Copyright © 2011-2022 走看看