问题描述
|
我正在尝试创建一种时尚的搜索功能，但是它似乎无法正常工作。但是我无法为您解释整个代码，但是您会看到“问题演示”页面（底部的链接）。问题是，当用户在搜索查询中输入字符串时，我想动态搜索与字符串匹配的关键字，并使用
Ajax
PHP
div
<html>
<head>
head including scripts here......
<script type=\"text/javascript\">
$(document).ready(function() {
$(\'div#search-bar\').mouSEOver(function() {
$(this).stop().animate({ opacity : \'1.0\',top : \'51px\' },200,\'linear\',function () {
$(\'input.search-textBox\',this).focus();
});
$(\'div.site-select span img\').stop().animate({ opacity : \'0.5\' },function () {});
$(\'img.search-button\').stop().animate({ opacity : \'0.6\' },function () {});
});
$(\'div#search-bar\').mouSEOut(function() {
$(this).stop().animate({ opacity : \'0.9\',top : \'60px\' },function (e) {
$(\'input.search-textBox\',this).blur();
$(\'div.search-keywords-framework\').css(\'opacity\',\'0.0\').stop();
});
$(\'div.site-select span img\').stop().animate({ opacity : \'0.2\' },function () {});
$(\'img.search-button\').stop().animate({ opacity : \'0.4\' },function () {});
});
$(\'input.search-textBox\').keyup(function (e) {
if ($(\'div.search-keywords-framework\').css(\'opacity\')==0)
{
$(\'div.search-keywords-framework\').animate({ opacity : \'1.0\' },function () {$(this).stop();});
}
});
$(\'div.search-keywords-framework\').mouSEOver(function () {
$(\'div#search-bar\').css(\'opacity\',\'1.0\');
});
$(\'div.search-keywords-framework\').click(function () {
$(\'div#search-bar\').css(\'opacity\',\'1.0\');
});
$(\'div.site-select span img.prev\').mouSEOver(function () {
$(this).animate({ opacity : \'1.0\' },function () { $(this).stop(); });
});
$(\'div.site-select span img.next\').mouSEOver(function () {
$(this).animate({ opacity : \'1.0\' },function () { $(this).stop(); });
});
$(\'div.site-select span img\').mouSEOut(function () {
$(this).animate({ opacity : \'0.5\' },100,function () { $(this).stop(); });
});
$(\'div.site-select span img.next\').click(function () {
$(this).animate({ opacity : \'1.0\' },function () { });
});
$(\'div.site-select span img.prev\').click(function () {
$(this).animate({ opacity : \'1.0\' },function () { });
});
$(\'img.search-button\').mouSEOver(function () {
$(this).animate({ opacity : \'1.0\' },function () { $(this).stop(); });
});
$(\'img.search-button\').mouSEOut(function () {
$(this).animate({ opacity : \'0.6\' },250,function () { $(this).stop(); });
});
$(\'div.site-select div.select-frame\').cycle({
fx: \'fade\',speed: 500,prev: \'div.site-select span img.prev\',next: \'div.site-select span img.next\',timeout: 0,pause: 1,cleartype: true,before: selectsitetext,after: selectsitetext
});
function selectsitetext() {
$(\'div.site-select input#select-site-text\').val($(this).text());
}
$(\'a.menu-button\').mouSEOver(function () {
$(\'img.over\',this).stop().animate({ opacity : \'1.0\' },function () {});
});
$(\'a.menu-button\').mouSEOut(function () {
$(\'img.over\',this).stop().animate({ opacity : \'0.0\' },150,function () {});
$(\'img.click\',function () {});
});
$(\'a.menu-button\').click(function (e) {
e.preventDefault();
$(\'img.click\',function () {});
});
});
</script>
</head>
<body>
other header framework here............
<div id=\"search-bar\">
<table width=\"500px\" cellpadding=\"0\" cellspacing=\"0\">
<tbody>
<tr>
<td class=\"search-frame-base-textBox-left\"></td>
<td class=\"search-frame-base-textBox-mid\">
<input type=\"textBox\" class=\"search-textBox\" />
<div class=\"search-keywords-framework\" style=\"position: absolute; z-index: 500; margin: 0px 0px 0px -30px; opacity: 0.0;\">
<table cellpadding=\"0\" cellspacing=\"0\" width=\"350px\" style=\"font-family: Droid Sans; font-size: 12px;\">
<tbody>
<tr>
<td style=\"background:url(\'img/search-keyword-bSAE-top-left.png\');width:17px;height:17px;background-repeat:no-repeat;\"></td>
<td style=\"background:url(\'img/search-keyword-bSAE-top-mid.png\');height:17px;background-repeat:repeat-x;\"></td>
<td style=\"background:url(\'img/search-keyword-bSAE-top-right.png\');width:17px;height:17px;background-repeat:no-repeat;\"></td>
</tr>
<tr>
<td style=\"background:url(\'img/search-keyword-bSAE-mid-left.png\');width:17px;background-repeat:repeat-y;\"></td>
<td style=\"background: rgb(242,242,242);\">
<div style=\"padding: 5px 5px; width: 100%;\"><a href=\"#\" style=\"color: #333; text-decoration: none; font-size: 12px;\">Search Demo 1</a><font style=\"float: right; background: #333; color: #fff; font-size: 10px; padding: 2px 5px; margin-right: 10px;\">26</font></div>
<br>
And much more similiar keywords...........
</td>
<td style=\"background:url(\'img/search-keyword-bSAE-mid-right.png\');width:17px;background-repeat:repeat-y;\"></td>
</tr>
<tr>
<td style=\"background:url(\'img/search-keyword-bSAE-bottom-left.png\');width:17px;height:17px;background-repeat:no-repeat;\"></td>
<td style=\"background:url(\'img/search-keyword-bSAE-bottom-mid.png\');height:17px;background-repeat:repeat-x;\"></td>
<td style=\"background:url(\'img/search-keyword-bSAE-bottom-right.png\');width:17px;height:17px;background-repeat:no-repeat;\"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td class=\"search-frame-base-textBox-right\"></td>
<td class=\"search-frame-base-site-bg\">
<div class=\"site-select\">
<div class=\"select-frame\">
<font>All</font>
<font>Games</font>
<font>Music</font>
<font>Videos</font>
</div>
<span class=\"search-select-sites-nav-frame\">
<img width=\"25px\" height=\"21px\" class=\"next\" src=\"img/search-frame-base-site-trigger-close.png\" />
<img width=\"25px\" height=\"21px\" class=\"prev\" src=\"img/search-frame-base-site-trigger.png\" />
</span>
<input type=\"hidden\" id=\"select-site-text\" />
</div>
</td>
<td class=\"search-frame-base-site-sep\"></td>
<td class=\"search-frame-base-button-bg\">
<img width=\"28px\" height=\"30px\" class=\"search-button\" src=\"img/search-frame-base-button.png\" />
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
footer framework...........
</body>
</html>
解决方法
首先，我强烈建议您放弃桌子。如果不希望将其显示为表格，则不应有一个。如果某些问题来自这个事实，我不会感到惊讶。
就是说，据我所知，当光标悬停在与6重叠的6上时，就会出现问题。如果将代码重构为更简单的块/级别体系结构而没有重叠（也没有表），并且仅在绝对必要时才使用
position:absolute
<table>
<td> <div> logo </div> </td>
<td> <div> search </div> </td>
</table>
<div class=\"menu-bar-base-small\" style=\"position:absolute\">...</div>
<div>
<div> logo </div>
<div> search </div>
</div>
<div class=\"menu-bar-base-small\" style=\"position:relative\">...</div>