<!DOCTYPE html>
<html>
<head>
<title>多选示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body class="container">
<h2 class="mt-4">多选示例</h2>
<div class="form-group mt-3">
<input type="text" class="form-control" id="searchInput" placeholder="搜索...">
</div>
<div class="mt-3" id="loading" style="display: none;">加载中...</div>
<ul class="list-group mt-3" id="results"></ul>
<p class="mt-3">已选择：</p>
<ul class="list-group" id="selectedItems"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
const searchInput = $('#searchInput');
const loading = $('#loading');
const results = $('#results');
const selectedItems = $('#selectedItems');
let selected = [];
searchInput.on('input', function() {
const searchTerm = $(this).val();
// 显示加载状态
loading.show();
results.empty();
// 模拟远程搜索，这里使用setTimeout来模拟延迟
setTimeout(function() {
// 模拟从服务器获取数据
const data = getRemoteData(searchTerm);
renderResults(data);
loading.hide();
}, 1000);
});
// 添加或移除已选择项
results.on('click', 'li', function() {
const item = $(this).text();
if (selected.includes(item)) {
selected = selected.filter(val => val !== item);
$(this).removeClass('list-group-item-primary');
} else {
selected.push(item);
$(this).addClass('list-group-item-primary');
}
updateSelectedItems();
});
function renderResults(data) {
results.empty();
data.forEach(function(item) {
const listItem = $('<li class="list-group-item">').text(item);
if (selected.includes(item)) {
listItem.addClass('list-group-item-primary');
}
results.append(listItem);
});
}
function updateSelectedItems() {
selectedItems.empty();
selected.forEach(function(item) {
selectedItems.append($('<li class="list-group-item">').text(item));
});
}
function getRemoteData(searchTerm) {
// 模拟从服务器获取数据
const data = [
'选项1',
'选项2',
'选项3',
'选项4',
'选项5',
'选项6',
];
// 过滤匹配搜索条件的项
return data.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
}
});
</script>
</body>
</html>