W3.js htmlテーブルフィルタ - onkeyupタイムアウト

Question

私はJavascriptを使い慣れていないので、次の問題に助けが必要です： 現在、私は.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"> 

、テーブルは2000行の長さで、検索が入力されたすべての単一の文字を処理し、結果をリフレッシュされています。私は、フィルタリングを行う1つの入力フィールドを持っています。私が必要とするのは、タイプされた単語/数字/ ...を実行することです。

私はここに同様の質問を発見したが、私はそれがw3.js（私はちょうどJSで始まる午前言ったように、多分、何か間違ったこと）を動作させることはできません。

Answer 1

でangularjs NG-MINLENGTH =「2」と呼ばれる概念は、検索は、検索文字列は、少なくとも2つの文字です後にのみ実行されることを意味している...そこにあります。だから私はjavascriptでそれを作った。 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>