Я пытаюсь создать стильную функцию поиска, но, похоже, она работает неправильно. Но я просто не могу объяснить вам весь код, но вы видите демонстрационную страницу проблемы (ссылка внизу). Проблема в том, что когда пользователь вводит строку в поисковый запрос, я хочу динамически искать ключевое слово, совпадающее со строкой, и отображать результаты в выпадающем (исчезающем) элементе div, используя Ajax и PHP. Но в настоящее время в нем нет такой функции. но я только что добавил пример содержимого типа фреймворка в этот элемент div.
Таким образом, когда пользователь вводит строку, элемент div исчезает, но когда пользователь наводит на него мышь, он просто исчезает. Я не знаю, в чем проблема. Поэтому, пожалуйста, просмотрите демонстрационную страницу проблемы и посмотрите код, но я также разместил код Jquery ниже, просто для справки. Но для HTML-кода вы должны просмотреть эту страницу. Может кто-нибудь помочь мне с этим, и если вы хотите больше информации, скажите мне, я предоставлю.
<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' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.6' },200,'linear',function () {});
});
$('div#search-bar').mouseout(function() {
$(this).stop().animate({ opacity : '0.9', top : '60px' },200,'linear',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' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.4' },200,'linear',function () {});
});
$('input.search-textbox').keyup(function (e) {
if ($('div.search-keywords-framework').css('opacity')==0)
{
$('div.search-keywords-framework').animate({ opacity : '1.0' },200,'linear',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' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').mouseover(function () {
$(this).animate({ opacity : '1.0' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img').mouseout(function () {
$(this).animate({ opacity : '0.5' },100,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('div.site-select span img.prev').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('img.search-button').mouseover(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { $(this).stop(); });
});
$('img.search-button').mouseout(function () {
$(this).animate({ opacity : '0.6' },250,'linear',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' },200,'linear',function () {});
});
$('a.menu-button').mouseout(function () {
$('img.over',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
$('img.click',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
});
$('a.menu-button').click(function (e) {
e.preventDefault();
$('img.click',this).stop().animate({ opacity : '1.0' },100,'linear',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>
Решение проблемы