如何使Ajax.Autocompleter执行请求而不键入?

时间:2008-09-24 01:44:49

标签: javascript ajax scriptaculous autocomplete

我正在使用scriptaculous的Ajax.Autocompleter进行不同过滤器的搜索。

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

过滤器要求我动态地将数据传递到自动完成器中,我已经通过以下链接成功学会了这一点。

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

现在,我有多个过滤器和一个搜索框。如何让自动完成器在没有输入输入的情况下发出请求,只需点击新的过滤器?

这是一个用例来澄清。页面加载,有多个过滤器(只是带有onclicks的链接),以及一个附加了自动完成器的输入字段。我输入一个查询并执行自动完成请求。然后,我点击一个不同的过滤器,我想要使用相同的查询,但不同的过滤器执行另一个请求。

或者更简洁一点,如何让自动完成程序在我想要时执行请求,而不是依赖于键入来触发它?

4 个答案:

答案 0 :(得分:3)

我还发现activate()方法效果很好。这是我的示例代码....

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

答案 1 :(得分:2)

回答我自己的问题:假按键。它确保发出请求,并且下拉框变为可见。这是我伪造按键的功能,它考虑了IE和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);
    }
  }

答案 2 :(得分:1)

查看了Scriptaculous来源以查看what happens on keypress,我建议您尝试拨打onObserverEvent()

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

答案 3 :(得分:1)

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