Dynamically Filtering Visible Div Elements
I am trying to only display the divs that are selected in the check开发者_开发百科boxes. This is working fine. I want to make it so that every time the user enters a character in the search box, the list of items is check, so if the user enters "div 4" and all divs are checked, then upon entering the "4", all will disappear except for the substring containing 4.
I want to do this with no submit button, dynamically.
How can I do this?
My code so far is like this :
<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>
Here's something I just hacked together. It needs fleshing out but I think it shows the basic idea.
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';
}
}
}
}
you can make a function, which would watch for document.getElementById('search').value and bind this function to onkeyup event if the search input element.
加载中,请稍侯......
精彩评论