How do I make an Ajax.Autocompleter perform a request without typing?

Question

I'm using scriptaculous's Ajax.Autocompleter for a search with different filters.

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

The filters are requiring me to pass data into the autocompleter dynamically, which I've successfully learned to do from the following link.

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

Now, I have multiple filters and one search box. How do I get the autocompleter to make the request without typing into the input, but by clicking a new filter?

Here's a use case to clarify. The page loads, there are multiple filters (just links with onclicks), and one input field with the autocompleter attached. I type a query and the autocompleter request is performed. Then, I click on a different filter, and I'd like another request to be performed with the same query, but different filter.

Or more succinctly, how do I make the autocompleter perform the request when I want, instead of depending on typing to trigger it?

Answer 1

Having looked at the Scriptaculous source to see what happens on keypress, I would suggest you try calling onObserverEvent().

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

Answer 2

To answer my own question: fake a key press. It ensures that the request is made, and that the dropdown box becomes visible. Here's my function to fake the key press, which takes into account the differences in IE and 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

I also found that the activate() method worked great. Here is my sample code....

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