jQuery 자동 완성 : 애니메이션 GIF 로딩 이미지를 표시하는 방법

jQuery 자동 완성 : 애니메이션 GIF 로딩 이미지를 표시하는 방법

---

ajax와 결합 된 jQuery AutoComplete 플러그인을 사용하고 있습니다. ajax 검색이 수행되는 동안 진행률 표시기를 어떻게 표시 할 수 있는지 알고 있습니까?

이것은 내 현재 코드입니다.

<script type="text/javascript">
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers');
</script>

<div>
    <input type="text" id="autocomplete-textbox" />
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span>
</div>

FindUsers URL은 콘텐츠의 사용자 목록을 반환합니다.

---

자동 완성은 이미 여기에 사용할 수있는 ui-autocomplete-loading클래스 (로드 기간 동안)를 추가합니다 .

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }

---

$("#autocomplete-textbox").autocomplete
(
search  : function(){$(this).addClass('working');},
open    : function(){$(this).removeClass('working');}
)

CSS 클래스 작업은 다음과 같이 정의됩니다.

.working{background:url('../img/indicator.gif') no-repeat right center;}

편집하다

Sam의 대답 은 문제를 해결하는 더 나은 접근 방식입니다.

---

결과가 작동하지 않으면 다음을 수행 할 수 있습니다.

$("input[name='search']").autocomplete({
...,
select: function( event, ui ) {
action show image
}   
}).data( "autocomplete" )._renderItem = function( ul, item ) {
action hide image
}

참조 URL : https://stackoverflow.com/questions/4489607/jquery-autocomplete-how-to-show-an-animated-gif-loading-image