标签:div init lang col data- ane tpi 使用 ons
<!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>
如果写成 obj.onkeyup = function() {
setTimeout(function() {开始搜。。。。}, 700);
}
这样的写法是有问题的,因为这样和没写定时器是一样的,还会发送每个请求,只是每个请求隔 了700毫秒而已。
所以,思路: 定义一个定时器, 每次keyup时先做个判断,若是上次的定时器没有完成,那就清空定时器,然后再重启,直到上次的完成了重启的才可以用。
<!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>
标签:div init lang col data- ane tpi 使用 ons
原文地址:https://www.cnblogs.com/fger/p/10921125.html