internet-explorer - framework - libreria prototype javascript

Script.aculo.us Problema de autocompletado en IE

Question

Estoy luchando con un problema con el control Script.aculo.us Autocompleter en IE (lo he intentado en IE6 y 7). Las sugerencias no aparecen porque el primer carácter se ingresa en el cuadro de texto después de que la página se haya cargado. Después de esa falla inicial, el control funciona como debería.

He verificado que los datos de las sugerencias son devueltos correctamente por el servidor; el problema parece tener algo que ver con el posicionamiento del elemento de sugerencias, ya que otros elementos relativamente posicionados en la página se salen de su posición en el momento en que esperaría que aparezcan las sugerencias.

¿Alguien ha oído hablar de ese problema o tiene alguna sugerencia sobre cómo solucionarlo?

Editar: En respuesta a Chris, configuré el parámetro partialChars en 1 y el control funciona en todos los otros navegadores que he probado, que son las últimas versiones de Firefox, Safari, Opera y Chrome. Probablemente debería haberlo dejado en claro en primer lugar. Gracias.

Answer 1

¿Tu problema solo está en IE o en todos los navegadores? Ignorar el primer carácter es el predeterminado para el autocompletador. En controls.js, hay una clase llamada Autocompleter.Local que tiene un campo llamado partialChars que por defecto es 2. Los documentos para ese campo dicen:

// - partialChars - Cuantos caracteres ingresar antes de disparar
// una coincidencia parcial (a diferencia de minChars, que define
// cuántos personajes se requieren para hacer cualquier coincidencia
// en absoluto). Predeterminado a 2.

Answer 2

Todavía no sé qué causó exactamente este problema, pero he logrado encontrar un truco para solucionarlo. La idea es realizar el procesamiento que normalmente causa el error en la entrada del primer carácter cuando la página se carga para que no se interponga:

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

De hecho estoy teniendo exactamente el mismo problema. El problema solo ocurre en IE (también en 8.0 beta)

Tanto Firefox como Chrome lo intenté, no tengo ningún problema.

Según otros, esto se debe a la declaración DOCTYPE en el archivo HTML. Compruebe aquí: http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

El error también tiene un boleto en las juntas de desarrolladores de Ruby: http://dev.rubyonrails.org/ticket/11051

Ambos enlaces tienen soluciones para solucionar el problema.

Con suerte, el error se solucionará en la próxima versión del prototipo / scriptaculous :)

Answer 4

Muchas gracias por el truco. Lo he usado yo mismo, pero lo he modificado para que solo se llame cuando se utiliza el Ajax.Autocompleter haciendo lo siguiente.

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

Dado que se llama a la devolución de llamada justo antes de que se realice la solicitud real, posicionar la DIV justo en ese momento tiene más sentido. Y se asegurará de que incluso si la ventana cambia de tamaño o se desplaza, el DIV se coloca correctamente. Lo que es enloquecedor es que para que funcione de manera consistente, tuve que envolverlo en un "setTimeout ()". No experimenté tanto con diferentes configuraciones de tiempo, pero si hay un umbral de tiempo de espera inferior que funciona, me gustaría saberlo.

Probado en IE 8 y 7 y funciona muy bien. Y funciona con otros navegadores reales también. Espero que esto ahorre dolores de cabeza a algunos codificadores cuando se trata de esto.

Answer 5

Este es un error conocido con un parche que funciona pero que aún no se ha incluido. Puedes leer más sobre esto aquí: https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket- 618-9

Answer 6

Después de mucho luchar con este problema en IE8 / IE9 terminé usando un hack de CSS. El método aquí es forzar la posición relativa dentro de un contenedor de posición absoluta. El contenedor extra es necesario para flotar las elecciones sobre otros elementos.

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

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

En mi código HTML, utilicé las clases de la siguiente manera:

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

La idea se originó aquí: Scriptaculous / Prototype IE 8 Problema de autocompletar desapareciendo .