一、bootstrap-select简单使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.         <title>
  9.             bootstrap 搜索下拉框
  10.         </title>
  11.         <!-- jquery -->
  12.         <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript">
  13.         </script>
  14.         <!-- bootstrap -->
  15.         <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css"
  16.         rel="stylesheet">
  17.         <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"
  18.         type="text/javascript">
  19.         </script>
  20.         <!-- bootstrap-select -->
  21.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  22.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js">
  23.         </script>
  24.         <style type="text/css">
  25.             .panel-default{ }
  26.         </style>
  27.     </head>
  28.  
  29.     <body>
  30.         <div class="container-fluid form-horizontal">
  31.             <div class="panel panel-default">
  32.                 <div class="panel-body">
  33.                     <div class="form-group">
  34.                         <label for="firstname" class="col-sm-2 control-label">
  35.                             搜索
  36.                         </label>
  37.                         <div class="col-sm-10">
  38.                             <!--下拉搜索框-->
  39.                             <select name="queryDevice" id="queryDevice" class="queryDevice selectpicker form-control"
  40.                             data-live-search="true">
  41.                                 <option value="">
  42.                                     请选择
  43.                                 </option>
  44.                             </select>
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </body>
  51.     <script type="text/javascript">
  52.         $("#queryDevice").on('shown.bs.select',
  53.         function(e) {
  54.             console.log('展开之后');
  55.             $('#queryDevice').prev().find("input").keydown(function() {
  56.                 $('#queryDevice').prev().find("input").attr('id', "deviceInput"); //为input增加id属性
  57.                 console.log($('#deviceInput').val()); //获取输入框值输出到控制台
  58.             })
  59.         })
  60.     </script>
  61.  
  62. </html>　

注:

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

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

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

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

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

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

具体思路:

  1. 如果写成 obj.onkeyup = function() {
  2. setTimeout(function() {开始搜。。。。}， 700)；
  3. }
  4. 这样的写法是有问题的，因为这样和没写定时器是一样的，还会发送每个请求，只是每个请求隔 了700毫秒而已。
  5. 所以，思路： 定义一个定时器， 每次keyup时先做个判断，若是上次的定时器没有完成，那就清空定时器，然后再重启，直到上次的完成了重启的才可以用。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>
  8.             bootstrap 搜索下拉框
  9.         </title>
  10.         <!-- jquery -->
  11.         <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript">
  12.         </script>
  13.         <!-- bootstrap -->
  14.         <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css"
  15.         rel="stylesheet">
  16.         <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"
  17.         type="text/javascript">
  18.         </script>
  19.         <!-- bootstrap-select -->
  20.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  21.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js">
  22.         </script>
  23.         <style type="text/css">
  24.             .panel-default{ }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div class="container-fluid form-horizontal">
  29.             <div class="panel panel-default">
  30.                 <div class="panel-body">
  31.                     <div class="form-group">
  32.                         <label for="firstname" class="col-sm-2 control-label">
  33.                             搜索
  34.                         </label>
  35.                         <div class="col-sm-10">
  36.                             <!--下拉搜索框-->
  37.                             <select name="queryDevice" id="queryDevice" class="queryDevice selectpicker form-control"
  38.                             data-live-search="true">
  39.                                 <option value="">
  40.                                     请选择
  41.                                 </option>
  42.                             </select>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </body>
  49.     <script type="text/javascript">
  50.         var timer = 0;//定义一个全局变量
  51.         $("#queryDevice").on('shown.bs.select',
  52.         function(e) {
  53.             console.log('展开之后');
  54.             $('#queryDevice').prev().find("input").keyup(function() {
  55.                 $('#queryDevice').prev().find("input").attr('id', "deviceInput"); //为input增加id属性
  56.                 //只是将请求减少了四次。
  57.                 //这种单纯是以内容改变后每隔250毫秒才去请求，如果连续250只要触发连续就不去请求，但是这种方式是保持250毫秒一次请求频率。
  58.                 clearTimeout(timer);
  59.                 timer = setTimeout(function() {
  60.                     console.log($('#deviceInput').val()); //获取输入框值输出到控制台
  61.                 },
  62.                 250);
  63.             })
  64.         })
  65.     </script>
  66. </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. prometheus 笔记

    前言 prometheus 是监控应用软件类似于nagios. 安装 1.官网下载prometheus-2.2.0.linux-amd64压缩包,解压,执行./prometheus即可.这里重要的是配 ...

  2. Linux命令"ls"进阶说明

    pwd:the current working directory cd -: return to the previous working directory Filenames that begi ...

  3. XP定位（APP元素定位）

    Appium app自动化测试经验分享-Xpath定位总结 在我看来,自动化测试中元素定位的倚天剑和屠龙刀莫过于 Xpath和CSS,但CSS只用于Web(之前已经分享过),这次就分享下Xpath的定 ...

  4. Oracle序列重置

    Oracle 中的序列我们一般用来生成流水号,所以需要进行重置(如每天凌晨重置一次),我们虽然可以通过重新编译的方式重置序列,可是这种方法会有弊端,比如导致与该序列相关的存储过程或函数失效等等,需要重 ...

  5. 从React Native到微服务，落地一个全栈解决方案

    Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...

  6. flutter 中的AppBar

    在flutter中的很多页面中,都会有下面这段代码: 对应就是下图中的红色线框区域,被称作AppBar顶部导航. 项目准备 在使用AppBar之前,我们先新建一个tabBar的项目: 然后在pages ...

  7. html 和 body标签的 css 设置

    个人猜测浏览器的机制:H5页面底板上有一张画布,画布高度可以被撑高.html.body等元素是固定在画布上的.浏览器中页面的滚动是跟着画布滚动的.(fixed定位是脱离这种机制的,相对浏览器窗口定位的 ...

  8. PyQuery爬取历史天气信息

    1.准备工作: 网址:https://lishi.tianqi.com/xian/index.html 爬虫类库:PyQuery,requests 2.网页分析: 红线部分可更改为需要爬取的城市名,如 ...

  9. nginx中如何设置gzip（总结）

    nginx中如何设置gzip(总结) 一.总结 一句话总结: 真正用的时候,花一小点时间把gzip的各个字段的意思都看一下,会节约大量时间 直接gzip on:在nginx的配置中就可以开启gzip压 ...

  10. 图解HTTP 读书笔记

    1 了解Web及网络基础 1.1   HTTP/1.0 HTTP正式作为标准被公布实在1996年五月,版本命名为HTTP/1.0,记载于RFC1945.至今仍广泛使用在服务器端. RFC1945 – ...