Script.aculo.us Autocompleter vấn đề trong IE

Question

Tôi đang đấu tranh với một vấn đề với điều khiển Script.aculo.us Autocompleter trong IE (Tôi đã thử nó trong IE6 & 7). Các đề xuất không xuất hiện cho ký tự đầu tiên được nhập vào hộp văn bản sau khi trang đã được tải. Sau thất bại ban đầu đó, điều khiển hoạt động như mong muốn.

Tôi đã xác minh rằng dữ liệu đề xuất được trả về từ máy chủ chính xác; vấn đề dường như có liên quan đến vị trí của phần tử đề xuất, vì các yếu tố tương đối vị trí khác trên trang di chuyển ra khỏi vị trí tại thời điểm bạn mong đợi các đề xuất xuất hiện.

Có ai đã từng nghe về sự cố như vậy hoặc có bất kỳ đề xuất nào về cách khắc phục sự cố không?

Chỉnh sửa: Để trả lời cho Chris, tôi đã đặt tham số partialChars thành 1 và điều khiển hoạt động trong tất cả các trình duyệt khác mà tôi đã thử, đây là các phiên bản mới nhất của Firefox, Safari, Opera và Chrome. Có lẽ tôi đã làm rõ điều đó ngay từ đầu. Cảm ơn.

Answer 1

Sự cố của bạn chỉ trong IE hoặc trong tất cả các trình duyệt? Bỏ qua char đầu tiên thực sự là mặc định cho Autocompleter. Trong controls.js, có một lớp được gọi là Autocompleter.Local có một trường được gọi là partialChars mặc định là 2. Các tài liệu cho trường đó nói:

// - partialChars - Số ký tự cần nhập trước khi kích hoạt
// so khớp một phần (không giống như minChars, xác định
// số lượng ký tự bắt buộc phải thực hiện bất kỳ đối sánh nào
// ở tất cả). Mặc định là 2.

Answer 2

Tôi vẫn không biết chính xác nguyên nhân gây ra sự cố này nhưng tôi đã cố gắng tìm ra một bản hack để làm tròn nó. Ý tưởng là để thực hiện việc xử lý thường gây ra sự thất bại về sự xâm nhập ký tự đầu tiên khi tải trang để có được nó ra khỏi con đường:

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

Tôi đang thực sự gặp vấn đề chính xác như vậy. Sự cố chỉ xảy ra trong IE (cũng ở phiên bản beta 8.0)

Cả Firefox và Chrome tôi đã thử, không có vấn đề gì.

Theo những người khác, điều này là do khai báo DOCTYPE trong tệp HTML. Kiểm tra ở đây: http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

Lỗi cũng đã có một vé tại các Ban phát triển ruby: http://dev.rubyonrails.org/ticket/11051

Cả hai liên kết đã có giải pháp để khắc phục vấn đề.

Hy vọng rằng lỗi sẽ được khắc phục trong phiên bản tiếp theo của prototype/scriptaculous :)

Answer 4

Cảm ơn bạn đã hack. Tôi đã sử dụng bản thân mình, nhưng đã sửa đổi nó để nó chỉ được gọi khi Ajax.Autocompleter được sử dụng bằng cách làm như sau.

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...] 

Vì cuộc gọi lại được gọi ngay trước khi yêu cầu thực hiện, định vị DIV ngay tại thời điểm đó có ý nghĩa nhất. Và sẽ đảm bảo rằng ngay cả khi cửa sổ được thay đổi kích thước hoặc cuộn, DIV được định vị chính xác. Điều gì là điên rồ là để làm cho nó luôn hoạt động, tôi đã phải bọc nó trong một "setTimeout()".Không thử nghiệm với các cài đặt thời gian khác nhau nhiều, nhưng nếu có ngưỡng thời gian chờ thấp hơn hoạt động, tôi muốn biết.

Đã thử nghiệm trên IE 8 & 7 và hoạt động rất tốt. Và làm việc với các trình duyệt thực khác. Hy vọng điều này sẽ tiết kiệm một số coders nhức đầu khi đối phó với điều này.

Answer 5

Đây là lỗi đã biết với bản vá hoạt động nhưng chưa được đưa vào. Bạn có thể đọc thêm tại đây: https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

Answer 6

Sau nhiều khó khăn với vấn đề này trong IE8/IE9, tôi đã kết thúc bằng cách sử dụng một bản hack CSS. Phương pháp ở đây là để buộc vị trí tương đối trong một container định vị tuyệt đối. Các thùng chứa thêm là cần thiết để nổi các lựa chọn trên các yếu tố khác.

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

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

Trong mã HTML của tôi, tôi sử dụng các lớp như sau:

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

Ý tưởng có nguồn gốc ở đây: Scriptaculous/Prototype IE 8 Autocomplete disappearing problem.