我试图只显示复选框中选中的div。这工作正常。我想这样做,以便每次用户在搜索框中输入一个字符时,检查项目列表,所以如果用户输入“div 4”并检查所有div,则在输入“4”时,全部除了包含4的子字符串外,它将消失。
我想动态地在没有提交按钮的情况下这样做。
我该怎么做?
到目前为止我的代码是这样的:
<html>
<head>
<script type="text/javascript">
<!--
function dynamicSearch() {
document.getElementById('search').value
}
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" onkeyup="dynamicSearch()"/>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>
</html>
答案 0 :(得分:1)
这是我刚刚一起入侵的东西。它需要充实,但我认为它显示了基本的想法。
function dynamicSearch() {
var val = document.getElementById('search').value;
if (val == '')
val = '-1';
var srch = new RegExp(val, "gi");
var els = document.getElementsByClassName('row');
for (var idx in els) {
if (idx != parseInt(idx))
continue;
var el = els[idx];
if (typeof(el.innerHTML) !== 'undefined') {
console.log(el.innerHTML);
if (srch.test(el.innerHTML)) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
}
}
答案 1 :(得分:0)
你可以创建一个函数,它会监视document.getElementById('search').value
并将此函数绑定到onkeyup
事件,如果是搜索输入元素。