Допилить jQuery.ajax

Тема в разделе "JavaScript", создана пользователем Sunday, 30 окт 2012.

Модераторы: ZiX
  1. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Прикрутил я себе на сайт живой поиск.
    Взято отсюда http://www.ajaxs.ru/lesson/ajax/132-zhivoj_poisk.html
    Проблема одна, которую хотелось бы решить.

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

    Вот форма
    Код:
    <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>
    Помогите пожалуйста.
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Код:
    $(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 нравится это.
  3. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Всё отлично, но вариант с fadeOut не подходит, т.к. в этом случае блок #resSearch удаляется из кода и при повторном вводе запроса результату не в чем выводится.

    ---

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

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    На самом деле при fadeOut блок не удаляется, он просто принимает значение display:none
    попробуйте подставить такой код:
    PHP:
    $(function(){
      $(
    "#search").keyup(function(){
         var 
    search = $("#search").val();
         $.
    ajax({
           
    type"POST",
           
    url"search.php",
           
    data: {"search"search},
           
    cachefalse,                                 
           
    success: function(response){
              $(
    "#resSearch").html(response);
           }
         });
         return 
    false;
      }).
    focusout(function(){ $("#resSearch").fadeOut(1000);}).focusin(function(){ $("#resSearch").fadeIn(1000);});
    });

    увидите какой эффект получится...
    А чтоб ссылки не убегали добавите в исходник условие:
    PHP:
    }).focusout(function(){if($("#resSearch").text()=="Начните вводить запрос") {$("#resSearch").html("");}});
    тогда результаты поиска не должны исчезать
     
    Sunday нравится это.
  5. Sunday

    Sunday

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

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Ну а почему же нельзя? Конечно можно :) сделаем изначально блок невидимым:
    Код:
    <div id="resSearch" style="display:none">Начните вводить запрос</div>
    а потом используем тот кусок кода, который я приводил выше:
    PHP:
    $(function(){
      $(
    "#search").keyup(function(){
        var 
    search = $("#search").val();
        $.
    ajax({
          
    type"POST",
          
    url"search.php",
          
    data: {"search"search},
          
    cachefalse,                             
          
    success: function(response){
              $(
    "#resSearch").html(response);
          }
        });
        return 
    false;
      }).
    focusout(function(){ if($("#resSearch").text()=="Начните вводить запрос")
    {$(
    "#resSearch").fadeOut(1000);}}).focusin(function(){ $("#resSearch").fadeIn(1000);});
    });

    З.Ы. поэкспериментировать с вашим кодом и увидеть как все работает можете здесь
     
    Sunday нравится это.
  7. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    726
    Симпатии:
    315
    Не, что-то не работает так. При 1-м вводе запроса блок появляется без эффекта.

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

    PS
    Скинул ссылку в личку
     
  8. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    в вашем случае блок изначально пустой, из-за этого эффект не виден... сделаем по другому:
    PHP:
    $(function(){
      $(
    "#search").keyup(function(){
        var 
    search = $("#search").val();
        $.
    ajax({
          
    type"POST",
          
    url"search.php",
          
    data: {"search"search},
          
    cachefalse,                             
          
    success: function(response){
              $(
    "#resSearch").html(response).fadeIn(1000);
          }
        });
        return 
    false;
      }).
    focusout(function(){ if($("#resSearch").text()=="Начните вводить запрос"){$("#resSearch").fadeOut(1000);}});
     
    Sunday нравится это.