Question

我是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）。

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>

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

1 个答案: