Допилить jQuery.ajax

[Sunday]

Прикрутил я себе на сайт живой поиск.
Взято отсюда Для просмотра ссылки Войди или Зарегистрируйся
Проблема одна, которую хотелось бы решить.

Нужно очистить блок с результатом поиска при потере инпутом фокуса.

Вот форма

<form action="search.php" method="post" name="form" onsubmit="return false;">
  <p>
    Живой поиск:<br> 
    <input name="search" type="text" id="search">
    <small>Вводите на английском языке</small>
  </p>
</form>

Вот jquery

<script type="text/javascript">
$(function(){
  $("#search").keyup(function(){
     var search = $("#search").val();
     $.ajax({
       type: "POST",
       url: "search.php",
       data: {"search": search},
       cache: false,                                 
       success: function(response){
          $("#resSearch").html(response);
       }
     });
     return false;
   });
});
</script>

Вот блок, который нужно очистить:

<div id="resSearch">Начните вводить запрос</div>

Помогите пожалуйста.

 

[dino]

$(function(){
  $("#search").keyup(function(){
    var search = $("#search").val();
    $.ajax({
      type: "POST",
      url: "search.php",
      data: {"search": search},
      cache: false,                               
      success: function(response){
          $("#resSearch").html(response);
      }
    });
    return false;
  }).focusout(function(){ $("#resSearch").html("");});
});​

ещё можно $("#resSearch").html(""); заменить на $("#resSearch").fadeOut(1000); тогда блок будет плавно исчезать...

 

[Sunday]

Всё отлично, но вариант с fadeOut не подходит, т.к. в этом случае блок #resSearch удаляется из кода и при повторном вводе запроса результату не в чем выводится.

---

Выяснилось, что при таких фокусах с фокусом невозможно кликнуть на ссылки в результатах поиска, блок тут же исчезает.

 

[dino]

На самом деле при fadeOut блок не удаляется, он просто принимает значение display:none
попробуйте подставить такой код:

$(function(){
  $("#search").keyup(function(){
     var search = $("#search").val();
     $.ajax({
       type: "POST",
       url: "search.php",
       data: {"search": search},
       cache: false,                                 
       success: function(response){
          $("#resSearch").html(response);
       }
     });
     return false;
  }).focusout(function(){ $("#resSearch").fadeOut(1000);}).focusin(function(){ $("#resSearch").fadeIn(1000);});
});​

увидите какой эффект получится...
А чтоб ссылки не убегали добавите в исходник условие:

}).focusout(function(){if($("#resSearch").text()=="Начните вводить запрос") {$("#resSearch").html("");}});

тогда результаты поиска не должны исчезать

 

[Sunday]

За счет затухания ссылка успевает кликнуться.
Раз уже дело дошло до эффектов, то возможно ли сделать такой же fadeIn для первоначального появления блока, т.е. в момент 1-го ввода запроса?

 

[dino]

Ну а почему же нельзя? Конечно можно сделаем изначально блок невидимым:

<div id="resSearch" style="display:none">Начните вводить запрос</div>

а потом используем тот кусок кода, который я приводил выше:

$(function(){
  $("#search").keyup(function(){
    var search = $("#search").val();
    $.ajax({
      type: "POST",
      url: "search.php",
      data: {"search": search},
      cache: false,                             
      success: function(response){
          $("#resSearch").html(response);
      }
    });
    return false;
  }).focusout(function(){ if($("#resSearch").text()=="Начните вводить запрос")
{$("#resSearch").fadeOut(1000);}}).focusin(function(){ $("#resSearch").fadeIn(1000);});
});​

З.Ы. поэкспериментировать с вашим кодом и увидеть как все работает можете Для просмотра ссылки Войди или Зарегистрируйся

 

[Sunday]

Не, что-то не работает так. При 1-м вводе запроса блок появляется без эффекта.

Условие я не использую, т.к.у меня нет строки "Начните вводить запрос" и блок изначально пустой.

PS
Скинул ссылку в личку

 

[dino]

в вашем случае блок изначально пустой, из-за этого эффект не виден... сделаем по другому:

$(function(){
  $("#search").keyup(function(){
    var search = $("#search").val();
    $.ajax({
      type: "POST",
      url: "search.php",
      data: {"search": search},
      cache: false,                             
      success: function(response){
          $("#resSearch").html(response).fadeIn(1000);
      }
    });
    return false;
  }).focusout(function(){ if($("#resSearch").text()=="Начните вводить запрос"){$("#resSearch").fadeOut(1000);}});​