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

  • 相关阅读:
    移动端调试利器-vConsole
    html手机调试
    vue实现PC端分辨率适配
    uniapp 判断 IOS和Android的GPS是否开启并设置启动
    Fiddler抓包工具使用
    js对象数组多字段排序
    时间戳转换时间格式
    从一个数组中删除另一个数组中存在的元素
    Python_下载二次登录后的页面源码
    Python_ip被封用代理
  • 原文地址:https://www.cnblogs.com/NazLee/p/11677816.html
Copyright © 2011-2022 走看看