W3.js html 테이블 필터 - onkeyup timeout

Question

나는 자바 스크립트를 처음 사용하여 다음과 같은 문제에 도움이 필요합니다. 현재 .xml 파일에서 HTML 테이블을 생성하는 PHP 페이지가 있습니다. 이 PHP 함수로 작업 :

function xmlToHtmlTable($p_oXmlRoot) { 
    $bIsHeaderProceessed = false; 

    $sTHead = ''; 
    $sTBody = '';  
    foreach ($p_oXmlRoot as $oNode) { 
     $sTBody .= '<tr class=item>'; 
     foreach ($oNode as $sName => $oValue){ 
      if (!$bIsHeaderProceessed) { 
       $sTHead .= "<th>{$sName}</th>"; 
      } 
      $sValue = (string)$oValue; 
      $sTBody .= "<td>{$sValue}</td>";     
     } 
     $bIsHeaderProceessed = true; 
     $sTBody .= '</tr>'; 
    } 

    $sHTML = "<table id=demo border=1> 
       <thead><tr>{$sTHead}</tr></thead> 
       <tbody>{$sTBody}</tbody> 
      </table>"; 
    return $sHTML; 

생성 된 테이블이 꽤 길며 필터링 옵션이 필요합니다. w3.js 필터 테이블 함수를 사용하여 요구 사항을 충족하는 간단한 솔루션을 발견했습니다. 내가 필터링을 수행 하나 개의 입력 필드가 있습니다

<input onkeyup="w3.filterHTML('#demo', '.item', this.value)" placeholder="Filter"> 

다 잘하지만 매우 느리게 작동하고, 테이블은 2,000 선 길이이며 검색은 모든 단일 문자가 입력 처리하고 그 결과를 상쾌. 내가 필요한 것은 입력 된 단어/숫자 /를 실행하는 것입니다. ... after는 2 초를 말합니다.

나는 비슷한 질문을 여기에서 발견했지만 w3.js에서 작동하지 않을 수있다. (어쩌면 내가 잘못 생각한 것 같다. JS로 시작한 것이다.)

Answer 1

angularjs에는 ng-minlength = "2"라는 개념이 있습니다. 이는 검색 문자열이 최소한 2 문자 이상인 경우에만 검색이 수행됨을 의미합니다. 그래서 자바 스크립트로 만들었습니다. w3 js 필터 함수를 직접 호출하는 대신 검색 문자열 길이가 2 이상이면 호출하십시오.

<p> 
    <!--<input oninput="w3.filterHTML('#id01', '.item', this.value)" placeholder="Search for names..">--> 
    <input oninput="searchFilter(this.value)" placeholder="Search for names.."> 
    </p> 
     <script> 
     function searchFilter(v) { 
      var n = v.length; 

      if(n>2) { 
       w3.filterHTML('#id01', '.item', v); 
      } 
      else { 
       w3.filterHTML('#id01', '.item', ''); 
      } 
     } 
    </script>