我正在处理的突出显示功能有一点问题。我基本上从数据库中加载以某种方式匹配当前表单数据的记录。然后,当有人填写表格时,如果他们描述的是我的系统中已经存在的问题,它将突出显示他们的描述与现有记录有共同之处的词。我的问题是桌子坏了。它会在一定程度上起作用,但有时它会将 PHP 循环部分从表格的其余部分中分离出来,然后它就没有格式,高亮功能也不起作用。更具体地说,一旦损坏,表格正文中的 td 标记就不会遵循标题行的格式。导致不良影响的条件:
- 浏览文本区域
- 如果必须一次删除或应用太多类(通过删除所有、添加许多单词或删除或搜索出现多次的单个字符)
主页上的html && 脚本来触发突出显示
<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 是这样的:
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>";
});
});
});
};
我想我应该添加一个带有某种转义的空测试,以解决第一个条件,但是对于第二个,我不确定发生了什么。任何建议都绝对值得赞赏。抱歉,这篇文章内容庞大且令人费解,但我希望每个人都能获得我能提供的所有信息。