一、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>
