2012-09-07 3 views
1

일부 탭에는 자동 완성 텍스트 상자가 있습니다.jQuery 자동 완성 탭 내부 - 검색 결과를 클릭하면 고아 결과 창이 생성됩니다.

는 예를 들어 여기를 참조하십시오 :

  1. 형 'A'텍스트 상자
  2. 클릭하여 다른 탭 중 하나에 바로
  3. 후 것은 기다립니다 : http://jsfiddle.net/fTQ26/3/

    다음 단계를 시도 몇 초

당신은 고아 aut ocomplete results 상자.

이것이 발생하지 않도록하는 가장 좋은 방법은 무엇입니까?

(나는이에 일어나는 매우 복잡하고있는 실제 페이지로 우아한 해결책 가능하면 감사하겠습니다!)

답변

1

존 Koerner에 올바른 것입니다. 그러나 다른 탭을 클릭 한 후에도 자동 완성을 종료해야합니다. 자동 완성이 열립니다까지

$("#tabs").tabs({ 
    select: function(event, ui) { 
     $("#tags").autocomplete('close'); 
    } 
}); 

Otherways 당신은 첫 번째 탭에서 대기하는 경우 그 다른 탭으로 이동 한 후, 자동 완성 콘텐츠의 상단에 아직도있다.

업데이트 됨 : http://jsfiddle.net/fTQ26/16/

+0

답변 주셔서 감사합니다. 그러나 요한의 대답에서 찾은 결함을 그대로 재현 할 수는 없습니다. John의 솔루션 (http://jsfiddle.net/fTQ26/15/)을 사용하여 텍스트를 입력하고 자동 완성 제안이 나타나기를 기다렸다가 다른 탭을 클릭하면 자동 완성 상자가 예상대로 사라졌습니다. 내가 놓친 게 있니? –

+0

그래, @ 마크 로빈슨. 저의 예에서 설명한 것보다 약간 더 있습니다. 1) 입력에 "A"를 입력하고 즉시 입력 바깥을 클릭합니다 (초점이 느슨해 짐). 2) 자동 완성이 열리면 다른 탭을 클릭하십시오. 3) 자동 완성이 아직 열려 있습니다. 그리고 요소에 초점을 맞추기 때문에보다 우아한 해결책이 여기에 있습니다. [http://jsfiddle.net/fTQ26/19/](http://jsfiddle.net/fTQ26/19/) –

+0

Ah, okay . 나는 그 미묘함을 놓쳤다. 귀하의 솔루션이 가장 완벽하다고 생각합니다. 도와 줘서 고마워, 유리. –

1

당신은 오픈 이벤트에 결합 요소가 표시되지 않는 경우, 다음을 닫을 수 있습니다 자동 완성 :

open: function (event, ui) 
{ 
    if (!$(this).is(":visible")) 
     $(this).autocomplete("close");     
} 

업데이트 바이올린 : http://jsfiddle.net/fTQ26/15/