하위 문자열에 대한 자바 스크립트 검색

사과는 더 이상 액세스하거나 댓글을 달 수없는 스레드의 재 게시입니다.하위 문자열에 대한 자바 스크립트 검색

내 검색 창에 포함 된 하위 문자열에 대해 HTML 페이지의 지정된 div를 모두 검색하는 javascript 함수를 작성하려고합니다. 어떻게하면됩니까?

여기 내 코드입니다. showMe 메서드는 선택한 div 만 표시하므로, 이제는 작동하도록 하위 문자열 코드가 필요합니다. 누군가 제발 도와 줄 수 있니?

<html> 

<head> 
<script type="text/javascript"> 
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'; 
     } 
     } 
    } 
    } 

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>

내가 여기에있는 코드는 내 체크 박스 제대로 실행하지만 그것은 단지 즉 DynamicSearch 기능이 작동하지 않습니다 (결과적으로 문자열 검색 표시 얻을 수 있지만, SHOWME 하나가하는 ... 또는 적어도 DynamicSearch 코드를 작동시키지 못합니까?)

출처

2011-04-28 user729051

는, * * 고려하시기 바랍니다하시기 바랍니다 jQuery를 또는 DOM 탐색/조작을위한 다른 라이브러리를. 또한, HTML 주석 태그 ('')로 스크립트를 래핑 할 필요가 없어 졌으므로 더 이상 사용하지 않아야하며, 특히 여는' meagar

JQuery를 사용하는 데 익숙합니다. 제대로 작동하는 함수를 얻을 수 없습니다 (아래 답변에 대한 내 의견 참조). 나는 당신이 지금 게시 한 다른 문제들을 고쳤다 고 생각합니다. 응답 해 주셔서 감사합니다. – user729051

간단한 루프에 어떤 문제가 있습니까?

function doSearch() { 
var val = $('searchBox').value; 
var els = document.getElementsByClassName('theDivs') 
//OR SIMILAR, whatever you need 
//var els = document.getElementsByTagName('div') 
for (el in els) { 
    if (el.innerHTML.indexOf(val) >= 0) 
    el.style.display = 'block' 
    else 
    el.style.display = 'none' 
} 
}

편집 :이 바이올린을 참조하십시오 - 다른 바이올린의 기반으로 : 당신이 그것을 피하는 몇 가지 특별한 이유 무효가되지 않는 한 http://jsfiddle.net/nLxc4/5/

출처

2011-04-28 20:36:55

다른 질문에 대한 답변 중 하나는 이와 유사했는데, 문제는 Div 1의 결과 만 얻으려는 경우 다른 div의 하위 문자열을 입력하면 표시되므로 문제가되지 않는다는 것입니다. 정말 일하지 않아. 나는 JQuery를 사용하는 것에 신경 쓰지 않을 것이며, 내 사이트에서 완전히 작동하도록 고심하고있다. 이전에 게시 된 코드 링크는 http://jsfiddle.net/alnitak/nLxc4/입니다. 나는 그저 고칠 때 머리를 쓰지 않는 것 같습니다. – user729051

그래서 ... 해당 확인란을 선택하면 div 만 검색해야합니까? –

편집을 참조하십시오 - 당신이 원하는 것을하는 것 같아요 ... –

하위 문자열에 대한 자바 스크립트 검색

답변

관련 문제