一、bootstrap-select简单使用

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>

            bootstrap 搜索下拉框

        </title>

        <!-- jquery -->

        <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript">

        </script>

        <!-- bootstrap -->

        <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css"

        rel="stylesheet">

        <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"

        type="text/javascript">

        </script>

        <!-- bootstrap-select -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js">

        </script>

        <style type="text/css">

            .panel-default{ }

        </style>

    </head>

    <body>

        <div class="container-fluid form-horizontal">

            <div class="panel panel-default">

                <div class="panel-body">

                    <div class="form-group">

                        <label for="firstname" class="col-sm-2 control-label">

                            搜索

                        </label>

                        <div class="col-sm-10">

                            <!--下拉搜索框-->

                            <select name="queryDevice" id="queryDevice" class="queryDevice selectpicker form-control"

                            data-live-search="true">

                                <option value="">

                                    请选择

                                </option>

                            </select>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        $("#queryDevice").on('shown.bs.select',

        function(e) {

            console.log('展开之后');

            $('#queryDevice').prev().find("input").keydown(function() {

                $('#queryDevice').prev().find("input").attr('id', "deviceInput"); //为input增加id属性

                console.log($('#deviceInput').val()); //获取输入框值输出到控制台

            })

        })

    </script>

</html>　

注:

1、按下keydown事件，但是并为获取keydown下的字母到，也是因为这个原因第一个按下获取的并控制台输出的是空。

解决方式:keyup替换keydown即可。

2、持续输入内容改变，去后台请求数据重新渲染列表，导致请求过于频繁，页面列表不断改变（没看清楚列表停顿，就因请求输入的方式改变），体验感不好。

解决方式:（在连续输入停顿直接设卡点，例如：内容改变的时候连续输入过程中停顿不超过0.5秒的过程中不必每次去请求，以最后一次为准即去请求，而当内容改变超过0.5就直接去请求即可。）。

3、第一次请求耗时一秒，第二次请求耗费0.1秒，会导致两个请求几乎同时到前台，会出现用户体验差。

解决方式:当第一次请求而未响应，那么发出第二次请求就会忽略和覆盖之前的请求。

具体思路:

如果写成 obj.onkeyup = function() {

setTimeout(function() {开始搜。。。。}， 700)；

}

这样的写法是有问题的，因为这样和没写定时器是一样的，还会发送每个请求，只是每个请求隔 了700毫秒而已。

所以，思路： 定义一个定时器， 每次keyup时先做个判断，若是上次的定时器没有完成，那就清空定时器，然后再重启，直到上次的完成了重启的才可以用。

以下是解决方式250毫秒触发到连续就不会去请求，但是这样请求堵塞还是没有解决即第一次请求未响应的时候，后面的请求则覆盖该请求和忽略响应。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>

            bootstrap 搜索下拉框

        </title>

        <!-- jquery -->

        <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript">

        </script>

        <!-- bootstrap -->

        <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css"

        rel="stylesheet">

        <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"

        type="text/javascript">

        </script>

        <!-- bootstrap-select -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js">

        </script>

        <style type="text/css">

            .panel-default{ }

        </style>

    </head>

    <body>

        <div class="container-fluid form-horizontal">

            <div class="panel panel-default">

                <div class="panel-body">

                    <div class="form-group">

                        <label for="firstname" class="col-sm-2 control-label">

                            搜索

                        </label>

                        <div class="col-sm-10">

                            <!--下拉搜索框-->

                            <select name="queryDevice" id="queryDevice" class="queryDevice selectpicker form-control"

                            data-live-search="true">

                                <option value="">

                                    请选择

                                </option>

                            </select>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        var timer = 0;//定义一个全局变量

        $("#queryDevice").on('shown.bs.select',

        function(e) {

            console.log('展开之后');

            $('#queryDevice').prev().find("input").keyup(function() {

                $('#queryDevice').prev().find("input").attr('id', "deviceInput"); //为input增加id属性

                //只是将请求减少了四次。

                //这种单纯是以内容改变后每隔250毫秒才去请求，如果连续250只要触发连续就不去请求，但是这种方式是保持250毫秒一次请求频率。

                clearTimeout(timer);

                timer = setTimeout(function() {

                    console.log($('#deviceInput').val()); //获取输入框值输出到控制台

                },

                250);

            })

        })

    </script>

</html>

一、bootstrap-select输入选择框的更多相关文章

  1. AngularJS学习之Select（选择框）

    1.AngularJS可以使用数组或对象创建一个下拉列表选项: 2.在AngularJS中我们可以使用ng-option指令创建一个下拉列表:列表项通过对象和数组循环输出: <div ng-ap ...

  2. bootstrap select下拉框模糊搜索和动态绑定数据解决方法

    此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...

  3. bootstrap下拉选择框倒三角所占宽度

    <select id="edit" class="form-control" style="width:42%;padding-right: 3 ...

  4. Jquery学习笔记：利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

  5. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  6. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  7. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：选择框（Select）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 禁止input文本框输入select无法选择

    readonly.disabled.autocomplete readonly表示此域的值不可修改,仅可与 type="text" 配合使用,可复制,可选择,可以接收焦点,后台会接 ...

随机推荐

  1. OpenStack虚拟机网络问题

    当发现你的OpenStack虚拟机网络有问题,不妨先试一下这16个步骤   1. Security Group全部打开,这是最基本的,但是很多人容易忘记 其实遇到过无数这种场景了,Debug了半天网络 ...

  2. Sass函数：Sass Maps的函数-map-get($map,$key)

    map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值.如果 $key 不存在 $map中,将返回 null 值.此函数包括两个 ...

  3. 非阻塞套接字与IO多路复用(转,python实现版)

    非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...

  4. iView的Message提示框

    全局配置message main.js Vue.prototype.$Message.config({ top: 70, duration:3 }); Vue.prototype.$Message.c ...

  5. Uva10491 Cows and Cars 【迁移自洛谷博客】

    题目大意 假设有a头牛,b辆车(门的总数为a+b),你先选一个门,然后你最终选择前主持人会替你打开C扇有牛的门(不会打开你已经选择的门),问你要不要换门,输出"总是换门"的策略下, ...

  6. springboot+jsp+mybatis项目实例（后台成功，但是无法跳转jsp页面,没有实体类的注解，看springboot+jsp第二弹相关配置，即可成功配置jsp）

    SpringBoot是用来简化SpringMvc开发的项目,这里自然要整合mybatis等持久化框架! 先看看项目目录: 一.在pom.xml中配置依赖jar包:<project xmlns=& ...

  7. Vue学习笔记-插槽基本使用

    为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...

  8. springBoot03- springboot+jpa+thymeleaf增删改查

    参考http://www.mooooc.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 数据库: CREATE TABLE ...

  9. myeclipse svn重新定位 本地文件 svn 重新定位

    我们在用工具myeclipse开发项目时,当资源库存储空间不够时,我们就需要添加资源库,涉及到我们切换项目资源库,下面就介绍一下svn资源库重新定位步骤 1,window到show view到othe ...

  10. 2018-2019 ACM-ICPC Brazil Subregional Programming Contest F. Music Festival

    题目:https://codeforces.com/gym/101908/problem/F 题意:给你n个舞台,每个舞台有很多个节目,每个节目有个开始时间,结束时间,价值,每个舞台至少出演过一个节目 ...