<div class="row m
-t
-5 pingwei
-tag
-list hide">
<div class="col
-md-2">
<label class="form
-label">
评委搜索:
</label>
</div>
<div class="col
-md-10">
<div class="input
-group mb
-3">
<input
type="text"
class="form
-control search
-input"
data
-id="{$vo.id}"
placeholder="请输入评委姓名..."
aria
-label="Search"
@select="handleSelect"
>
<button class="btn btn
-outline search
-btn" type="button">
<i class="fa fa
-search"></i> 搜索
</button>
</div>
</div>
</div>
<div class="row assign
-select
-pingwei hide">
<div class="col
-md-2">
<label class="form
-label">
<span class="text
-danger">*</span>选择评委:
</label>
</div>
<div class="col
-md-10">
<div id="pingwei
-checkbox" class="selectgroup selectgroup
-pills">
{volist name='pingwei' id='vo' }
<div class="custom
-control custom
-checkbox custom
-control
-inline">
<input type="
checkbox" class="custom
-control
-input form
-check
-input pingwei
-checkbox" id="form
-pingwei[{$vo.id}]" value="{$vo.id}" name="pingwei[]">
<label class="custom
-control
-label" for="form
-pingwei[{$vo.id}]" style="cursor: pointer;"><i class="fa fa
-tags badge badge
-success m
-r
-5 m
-b
-5">{$vo.realname}</i></label>
<div class="invalid
-feedback">请选择...</div>
</div>
<!
-- <div class="custom
-control custom
-checkbox custom
-control
-inline pingwei
-item"
-->
<!
-- data
-pingwei
-id="{$vo.id}">
-->
<!
-- <input type="
checkbox" class="custom
-control
-input form
-check
-input pingwei
-check
-input"
-->
<!
-- id="form
-pingwei[{$vo.id}]" value="{$vo.id}" name="pingwei[]">
-->
<!
-- <label class="custom
-control
-label" for="form
-pingwei[{$vo.id}]" data
-toggle="tooltip"
-->
<!
-- style="cursor: pointer;" title="{$vo.realname}
-{$vo.phone}">
-->
<!
-- <i class="fa fa
-user"></i>
-->
<!
-- {$vo.realname}
-->
<!
-- </label>
-->
<!
-- </div>
-->
{/volist}
</div>
</div>
</div>
// 获取DOM元素
var searchInput = document.querySelector('.search
-input');
var searchBtn = document.querySelector('.search
-btn');
var pingweiItems = document.querySelectorAll('.pingwei'); // 所有评委项
// 初始化
function init() {
bindEvents();
}
// 事件绑定
function bindEvents() {
// 输入框输入事件
searchInput.addEventListener('input', debounce(handleSearch, 200));
// 搜索按钮点击事件
searchBtn.addEventListener('click', () => handleSearch());
}
// 处理搜索逻辑
function handleSearch() {
const query = searchInput.value.trim().toLowerCase();
// 如果无关键词，显示所有评委并隐藏提示
if (!query) {
pingweiItems.forEach(item => item.style.display = 'inline
-block');
loadingTip.style.display = 'none';
emptyTip.style.display = 'none';
return;
}
// 显示加载状态
loadingTip.style.display = 'block';
emptyTip.style.display = 'none';
setTimeout(() => {
let hasMatch = false; // 是否有匹配的评委
// 遍历评委项进行模糊匹配
pingweiItems.forEach(item => {
const name = item.dataset.name.toLowerCase();
if (name.includes(query)) {
item.style.display = 'inline
-block';
hasMatch = true;
} else {
item.style.display = 'none';
}
});
// 隐藏加载状态
loadingTip.style.display = 'none';
// 根据是否有匹配显示空提示
emptyTip.style.display = hasMatch ? 'none' : 'block';
}, 200);
}
// 启动初始化
init();
扫一扫
6089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
