Skip to content

Instantly share code, notes, and snippets.

@newpost

newpost/index.html

Created October 17, 2019 02:46
Show Gist options
  • Save newpost/473439a44e41e01ccfbe87d5904c2e91 to your computer and use it in GitHub Desktop.
Save newpost/473439a44e41e01ccfbe87d5904c2e91 to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap-select支持搜索,动态改变option，支持防抖
Raw
index.html
<!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>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
</head>
<body>
<div id="app">
<select class="selectpicker" id="queryDevice" data-live-search="true">
</select>
<input class="form-control form-control-lg" type="text" v-model="name" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-zh_CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
//检索设备
$("body").on('input', '#queryDevice~.dropdown-menu input', _.debounce(function (e) {
$(e.target).attr('id', "deviceInput"); //为input增加id属性
console.log($('#deviceInput').val()); //获取输入框值输出到控制台
var deviceInput = $('#deviceInput').val();
var deviceStr = "";
for (var i = 0; i < 8; i++) {
deviceStr += "<option data-tokens='" + i + "'> 设备" + i + "</option>";
}
$("#queryDevice").html("");
$('#queryDevice').append(deviceStr);
$('#queryDevice').selectpicker('refresh');
},1000));
var vm = new Vue({
el: '#app',
data: {
name:'niceguy'
}
})
$(function(){
$('#queryDevice').append( "<option data-tokens='" + 1 + "' value='1'> 设备" + 1 + "</option>")
$('#queryDevice').selectpicker('val', '1');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment