자동 완성 : 원격 데이터 소스

Question

상황

• I 원격 데이터 소스와 jQuery를 UI 자동 완성을 사용하여 어떠한 결과를 감지하지 않습니다.
• 소스는 다음 형식의 데이터를 전송합니다 : [{'label':'Bob', 'id':'03362548'}, {...}].
• 검색이 시작되면 로더 gif가 표시됩니다.
• 데이터 필터링은 서버 측에서 수행됩니다.
• 결과가 없으면 로더 gif를 숨기려고합니다 (서버가 []을 전송 함).

질문

검색이 로더 GIF를 숨기고에 대한 검색 결과가없는 경우 어떻게 감지 하는가?

코드

jquery는 : 플러그인이 결과를 표시 할 때이 데이터를 표시하는 경우 기본적으로

$('#redir-output').autocomplete({ 
    source: 'php/ajax/autocomplete.php', 
    search: function(event, ui) { 
     $('#redir-loader').show(); 
    }, 
    open: function(event, ui) { 
     $('#redir-loader').hide(); 
    }, 
    select: function(event, ui) { 
     $(this).attr('name', ui.item.id); 
    } 
}); 

Answer 1

, 그것은 확인합니다. 없는 경우에는 메뉴를 닫습니다.

_response: function(content) { 
    if (!this.options.disabled && content && content.length) { 
     ... 
    } else { 
     // it closes the menu when content.length == 0 (no data) 
     this.close(); 
    }​ 

메뉴를 닫으면 "닫기"이벤트가 발생하므로 사용할 수는 있습니다. 그러나, 가까운 이벤트는 메뉴가 표시 될 때 트리거 :

close: function(event) { 
    clearTimeout(this.closing); 
    // as the menu might not be visible at that moment, this is reliable 
    if (this.menu.element.is(":visible")) { 
     ... 
     this._trigger("close", event); 
    } 
}​ 

난 당신이 콜백으로 소스를 사용하여 자신에게 아약스 요청을 구현해야합니다 생각합니다. '완료'콜백을 사용하면로드 아이콘을 숨길 수 있습니다.이 아이콘은 요청이 끝났을 때 데이터가 반환되거나 표시되지 않을 때 숨겨져 있어야합니다.

$('#redir-output').autocomplete({ 
    source: function(request, response) { 

     $.ajax({ 
      url: 'php/ajax/autocomplete.php', 
      data: request, 
      dataType: "json", 
      success: function(data, status) { 
       response(data); 
      }, 
      error: function() { 
       response([]); 
      }, 
      complete: function() { 
       $('#redir-loader').hide(); 
      } 
     }); 

    }, 

    , 
    search: function(event, ui) { 
     $('#redir-loader').show(); 
    }, 
    open: function(event, ui) { 
     $('#redir-loader').hide(); 
    }, 
    select: function(event, ui) { 
     $(this).attr('name', ui.item.id); 
    } 
});?