jQuery Highlight()在动态表中中断

问题描述

我正在使用的突出显示功能有一个小问题.我基本上是从数据库中以某种方式将匹配当前表单数据的记录加载到数据库中.然后，当某人填写表格时，如果他们描述的是我系统中已经存在的问题，它将突出显示其描述与现有记录共有的单词.我的问题是桌子坏了.它会在一定程度上起作用，但有时会将PHP循环部分从表的其余部分中分离出来，然后便无法进行格式化，并且突出显示功能将不起作用.更具体地说，一旦损坏，表主体中的td标签将不遵循标题行的格式.导致不良影响的条件:

I've got a little issue with a highlight function I'm working on. I basically load records out of a database that match the current form data in certain ways. Then, when someone is filling in the form, if they are describing an issue that already exists in my system, it will highlight words that their description has in common with the existing record(s). My issue is that the table breaks. It will work to a certain extent, but sometimes it breaks the PHP loop portion out of the rest of the table, and it then has no formatting, and the highlighting function will not work. To be more specific, once broken, the td tags in the body of the table do not follow the formatting of the header row.Conditions that cause the undesirable effect:

1. 在文本区域中浏览
2. 如果必须一次删除或应用太多类(通过删除所有类，添加多个单词或删除或搜索出现多次的单个字符)

html在主页上&&脚本来触发突出显示

html on the main page && script to trigger the highlighting

<textarea name="description" id="description"></textarea>
<script>
 var delay = (function(){
 var timer = 0;
 return function(callback, ms){
 clearTimeout (timer);
 timer = setTimeout(callback, ms);
 };
 })();
 $(function(){
    $("#description").keydown(function(){
    delay((function(){
    $("#displayer *").removeClass('highlight');
    var1 = $('textarea#description').val().split(' ');
    for (var i=0;i<var1.length;i++){
    $("#displayer *").highlight(var1[i], "highlight")};
    }),1000);
    });
    });
 </script>

基于ajax调用构建搜索表的外部php是这样的:

the external php that builds the searched table based on an ajax call is this:

echo '<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="5" id="displayer"><FONT     FACE="ARIAL">';

   echo ' <tr> '; 
echo '   <td width="20" ALIGN="LEFT" height="1">ID</td>'; 
echo '   <td width="89" ALIGN="LEFT" height="1">Date</td> '; 
echo '   <td width="200" ALIGN="LEFT" height="1" >Description</td>'; 
echo '   <td width="89" ALIGN="LEFT" height="1" >Solution</td>'; 
echo '   <td width="20" ALIGN="LEFT" height="1" >User:</td>'; 
echo '   <td ALIGN="LEFT" height="1" >Key?:</td>';
echo '   <td ALIGN="LEFT" height="1" >Part:</td>';
echo '   <td ALIGN="LEFT" height="1" >Classified As:</td>';
echo ' </tr>   '; 
 for ($i=1; $i <= $num_results; $i++)
    {
   $row = mysql_fetch_array($result1); 

     echo '<TR BGCOLOR="#EFEFEF">';
     echo '<TD width="20">';
     echo  stripslashes($row['0']) ;
     echo '</TD>';
     echo '<TD width="89" >';
     echo  $row['1'] ;
     echo '</TD>';
     echo '<TD width="200">';
     echo  stripslashes($row['6']) ;
     echo '</TD>';
     echo '<TD width="89">';
     echo  stripslashes($row['11']) ;
     echo '</TD>';
     echo '<TD  width="20">';
     echo  $row['5'] ;
     echo '</TD>';
      echo '<TD>';
      if ($row['8'] == 1)
     {echo  'Yes' ;}
     else 
     {echo 'No' ;}

     echo '</TD>';
     echo '<td>'.$row['10'].'</td>';
     echo '<td>'.$row['9'].'</td>';

     echo '</TR>';

    }
         echo '</TABLE>';

外部高亮插件:

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

我认为我应该添加某种针对空的测试并进行某种转义，以解决第一个条件，但是对于第二个条件，我不确定发生了什么.任何建议都将不胜感激.抱歉，帖子内容庞大且令人费解，但是我希望每个人都拥有我所能提供的所有信息.

I think I should add a test for empty with some kind of escape, to solve the first condition, but with the second, I'm not sure what's happening. Any suggestions are definitely appreciated. Sorry for the post being huge and convoluted, but I wanted everyone to have all the information I could provide.

推荐答案

$(function(){
    $("#description").keydown(function(){
        delay((function(){
        var divClone = $("#disp_hidden .serial_display").clone();
        $("#displayer .serial_display").replaceWith(divClone);
                if ($.trim($('textarea#description').val()) != ''){
                var1 = $('textarea#description').val().trim().split(' ');
            for (var i=0;i<var1.length;i++){
            $("#displayer *").highlight(var1[i], "highlight")};
            };
        }),1000);
        });
        });

隐藏表克隆，已修复，已替换，已修复.

hidden table clone, replaces at new edit, fixed.

这篇关于jQuery Highlight()在动态表中中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！