javascript - ejemplo - ¿Cómo puedo hacer que un Ajax.Autocompleter realice una solicitud sin escribir?

input autocomplete javascript

Question

Estoy usando Ajax.Autocompleter de scriptaculous para una búsqueda con diferentes filtros.

http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter

Los filtros me requieren pasar datos al autocompletador dinámicamente, lo cual he aprendido a hacer con éxito desde el siguiente enlace.

http://www.simpltry.com/2007/01/30/ajaxautocompleter-dynamic-parameters/

Ahora, tengo múltiples filtros y un cuadro de búsqueda. ¿Cómo hago que el autocompletador haga la solicitud sin escribir en la entrada, pero al hacer clic en un nuevo filtro?

Aquí hay un caso de uso para aclarar. La página se carga, hay varios filtros (solo enlaces con onclicks) y un campo de entrada con el autocompletador adjunto. Escribo una consulta y se realiza la solicitud de autocompletar. Luego, hago clic en un filtro diferente y me gustaría que se realice otra solicitud con la misma consulta, pero con un filtro diferente.

O de manera más sucinta, ¿cómo hago que el autocompletador realice la solicitud cuando quiero , en lugar de depender de escribir para activarla?

Answer 1

Después de haber examinado la fuente Scriptaculous para ver qué sucede al presionar una tecla , le sugiero que intente llamar a onObserverEvent() .

var autoCompleter = new Ajax.Autocompleter(/* exercise for the reader */);
// Magic happens
autoCompleter.onObserverEvent();

Answer 2

Para responder a mi propia pregunta: falsifique presionar una tecla. Asegura que se realiza la solicitud y que el cuadro desplegable se vuelve visible. Aquí está mi función para falsificar la pulsación de tecla, que tiene en cuenta las diferencias en IE y Firefox.

 function fakeKeyPress(input_id) {
var input = $(input_id);
if(input.fireEvent) {
// ie stuff
var evt = document.createEventObject();
evt.keyCode = 67;
$(input_id).fireEvent("onKeyDown", evt);
} else {
// firefox stuff
var evt = document.createEvent("KeyboardEvent");
evt.initKeyEvent(''keydown'', true, true, null, false, false, false, false, 27, 0);
var canceled = !$(input_id).dispatchEvent(evt);
}
}

Answer 3

var autoCompleter = new Ajax.Autocompleter(/* exercise for the reader */);
// Magic happens
autoCompleter.activate();

Answer 4

También encontré que el método activate () funcionó muy bien. Aquí está mi código de muestra ...

<script type="text/javascript">
/*<![CDATA[*/
var autocomp1 = new Ajax.Autocompleter("search", "AjaxResultsListPlaceholder", "ajaxServerSideSearchHandler.php", {
frequency: 1,
minChars: 10,
indicator: "AjaxWorkingPleaseWaitPlaceholder",
} );
/*]]>*/
</script>
<form id="theform">
<input type="text" id="search" name="search" value="" />
<input type="button" id="btn_search" name="btn_search" value="Search" onclick="autocomp1.activate();" />
<div id="AjaxWorkingPleaseWaitPlaceholder" style="display: none; border: 1px solid #ffaaaa;">
</div>
<div id="AjaxResultsListPlaceholder" style="display: none;; border: 1px solid #aaffaa;">
</div>
</form>