Script.aculo.us IE의 자동 완성 문제

Question

IE의 Script.aculo.us Autocompleter 컨트롤에 문제가 있습니다 (IE6에서 시도했습니다. & 7). 페이지가로드 된 후 텍스트 상자에 첫 번째 문자가 표시되지 않는 제안이 입력됩니다. 초기 실패 후에는 컨트롤이 정상적으로 작동합니다.

제안 데이터가 서버에서 올바르게 반환되었는지 확인했습니다. 문제는 제안 요소의 위치와 관련이있는 것처럼 보입니다. 제안 된 요소가 나타날 것으로 기대하는 순간 페이지의 다른 상대적으로 배치 된 요소가 다른 위치로 이동하기 때문입니다.

누군가 이러한 문제에 대해 들었거나 문제를 해결하는 방법에 대한 제안이 있습니까?

편집 : Chris에 대한 응답으로 partialChars 매개 변수를 1로 설정했으며 컨트롤은 Firefox, Safari, Opera 및 Chrome의 최신 버전 인 다른 모든 브라우저에서 작동합니다. 아마 처음부터 분명히해야 할 것 같습니다. 감사.

Answer 1

문제가 IE 또는 모든 브라우저에서만 발생합니까? 첫 번째 문자를 무시하는 것은 실제로 자동 완성기의 기본값입니다. controls.js에서 2. 기본값은 해당 필드에 대한 문서 말할 필드라는 partialChars가 Autocompleter.Local라는 클래스있다 : - partialChars -

// 얼마나 많은 문자
를 트리거하기 전에 입력 // 부분 일치 (minChars와는 달라,
// 일치를 수행하는 데 필요한 문자 수는
//). 기본값은 2입니다.

Answer 2

이 문제의 원인을 정확히 알 수는 없지만이를 해결할 수있는 해킹이있었습니다.

new Ajax.Autocompleter(textInputId, suggestionsHolderId, suggestionsUrl, params); 

//Hack 
Event.observe(window, 'load', function() 
{ 
    try 
    { 
     Position.clone($(textInputId), $(suggestionsHolderId), 
      { setHeight: false, offsetTop: $(textInputId).offsetHeight}); 
    } 
    catch(e){} 
}); 

Answer 3

을 내가 실제로 동일한 문제가 있습니다 : 아이디어는 페이지가로드 방식에서 그것을 얻을 때 일반적으로 첫 번째 문자 입력에 오류가 발생합니다 처리를 수행하는 것입니다. 이 문제는 Internet Explorer (8.0 베타 버전)에서만 발생합니다.

Firefox와 Chrome 모두 시도했는데 문제가 없습니다.

다른 사람에 따르면 이것은 HTML 파일의 DOCTYPE 선언 때문입니다. 여기 확인 : http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

버그도 루비 개발자 보드에서 티켓을 가지고있다 : http://dev.rubyonrails.org/ticket/11051

두 링크는 ​​문제를 해결하는 솔루션을 가지고있다.

는 희망이 버그는 프로토 타입/script.aculo.us의 : 해킹에 대한

Answer 4

많은 감사의 다음 버전에서 해결 될 것입니다. 나는 이것을 사용했지만 Ajax.Autocompleter가 다음을 수행하여 사용될 때만 호출되도록 수정했다. 콜백이 실제 요청이 단지 그 순간에 DIV의 위치를 ​​만들어되기 바로 전에 호출되기 때문에

는

function positionAuto(element, entry) { 
    setTimeout(function() { 
     Element.clonePosition('choices_div', 'text_element', { 
     'setWidth': false, 
     'setHeight': false, 
     'offsetTop': $('text_element').offsetHeight 
    }); 
    }, 300); 
    return entry; 
} 

new Ajax.Autocompleter('text_element', 'choices_div', [url to web service], { 
    paramName: 'fulltext', 
    minChars: 2, 
    callback: positionAuto, // See above 
    [etc...] 

가장 의미가 있습니다. 창 크기를 조정하거나 스크롤해도 DIV가 올바르게 배치되었는지 확인합니다. maddening은 일관되게 작동하도록하기 위해 "setTimeout()"에 포장해야했습니다.그다지 다른 타이밍 설정으로 실험하지는 않았지만, 작동하는 타임 아웃 임계 값이 더 낮 으면, 알고 싶습니다.

IE 8 &에서 테스트되었으며 매우 잘 작동합니다. 그리고 다른 실제 브라우저에서도 작동합니다. 이 문제를 해결할 때 일부 코더의 두통을 덜어주기를 바랍니다.

Answer 5

이 패치는 작동하지만 아직 포함되지 않은 알려진 버그입니다. 당신은 그것에 관하여 더 많은 것을 여기에서 읽을 수있다 : https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

Answer 6

IE8/IE9에있는이 문제점으로 다량 고투 후에 나는 CSS 전세 마차를 사용하여 끝냈다. 여기에서의 방법은 절대 위치 컨테이너 내에서 상대적인 위치를 강제하는 것입니다. 추가 요소는 다른 요소보다 선택 항목을 떠 다니는 데 필요합니다. Scriptaculous/Prototype IE 8 Autocomplete disappearing problem :

<div class="acwrap"> 
<div id="autocomplete_choices" class="autocomplete"> 
</div> 
</div> 

아이디어는 여기에서 유래 다음과 같이 내 HTML 코드에서

div.acwrap { 
    position: absolute; 
    height: 40px; 
} 

div.autocomplete { 
    position: relative !important; 
    top: -5px !important; 
    left: 0px !important; 
    width:250px; 
    margin:0; 
    padding:0; 
} 

나는 클래스를 사용했다.