zoukankan      html  css  js  c++  java
  • 自动补全bootstrap3-typeahead.js

    <form class="form-horizontal" role="form">
        <div class="form-group col-sm-6">
            <label for="" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10 has-feedback">
                <input id="" type="text" class="form-control typeahead" placeholder="请输入姓" />
                <span class="glyphicon glyphicon-triangle-bottom form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span></div>
        </div>
    </form>
    <!--自定义样式--> .typeahead{ max-height: 250px; overflow: auto; }

     <script>

        $(document).ready(function () {
            var $input = $(".typeahead");
            $input.typeahead({
                minLength: 0,//键入字数多少开始补全
                showHintOnFocus: "true",//将显示所有匹配项
                fitToElement: true,//选项框宽度与输入框一致
                items: "all",//提示数量上限
                source: [
                  { id: "someId1", name: "Display name 1" },
                  { id: "someId2", name: "Display name 2" },
                  { id: "someId3", name: "Display name 3" },
                  { id: "someId4", name: "Display name 4" },
                  { id: "someId5", name: "Display name 5" },
                  { id: "someId6", name: "Display name 6" },
                ],
                autoSelect: true,
           afterSelect:function(item){
              //点击方法
            },
           displayText:function(item){
              //返回字符串
           } }); }); </script>

      

    typeahead.js  bootstrap3-typeahead.js 还有jQuery ui 插件autocomplete

    先说bootstrap3-typeahead.js符合bootstrap样式格式但是功能没有衍生typeahead.js强大:

    官网:https://github.com/bassjobsen/Bootstrap-3-Typeahead/

    菜鸟网站上:http://www.runoob.com/bootstrap/bootstrap-v2-typeahead-plugin.html

  • 相关阅读:
    win7服务器从本地粘贴的文件,粘贴卡死
    AOP面向切面编程
    静态代理和动态代理
    查询数据库中第n行数据
    记录我的成长
    路径总和,双重递归
    java Queue 常用方法(持续更新)
    对称二叉树
    Linux学习之五——Linux虚拟机文件系统
    Linux学习之四——命令运行机制及查看命令帮助
  • 原文地址:https://www.cnblogs.com/NazLee/p/11677816.html
Copyright © 2011-2022 走看看