W3.js html 表格过滤器 - onkeyup 超时答案

【问题标题】：W3.js html table filter - onkeyup timeoutW3.js html 表格过滤器 - onkeyup 超时
【发布时间】：2017-05-04 18:30:51
【问题描述】：

我是 Javascript 新手，需要帮助解决以下问题：目前我有 php 页面，我从 .xml 文件生成 html 表。它使用这个 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 行，搜索正在处理输入的每个字符并刷新结果。我需要的是在 2 秒后执行键入的单词/数字/...。

我在这里找到了类似的问题，但我无法使其与 w3.js 一起工作（可能做错了什么，正如我所说的我刚开始使用 JS）。

【问题讨论】：

标签： javascript php filter html-table onkeyup

【解决方案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>

【讨论】：