Events 如何向模板中添加新的事件处理？

以下模板正在按用户对输入进行搜索。它只在按enter键或按search按钮时进行搜索。如何更改它，以便每次用户在搜索字段中输入字母（字符）时，搜索都会发生（不必等待用户按enter键或搜索按钮）

Ext.onReady（函数（）{
{%autoescape off%}
var submitForm=function（）{
Ext.query（“#搜索表单”）[0]。提交（）；
};
var searchButton=new Ext.Button（{renderTo:'submit_search'，text:'{%trans“search”%}'，
处理程序：submitForm}）；
var searchInput=new Ext.form.TextField（{applyTo:'search_query'，宽度：350}）；
{%endautoescape%}
});
{%endblock%}
{%block nav%}
{%navbar映射%}
{%endblock%}
{%block main%}
{%trans“搜索”%}{%trans”查找映射“%}
{%csrf_令牌%}

|

{%trans“创建映射”%}
{%trans“使用GeoNode的Map Composer应用程序创建您自己的地图。从此GeoNode或远程服务添加图层，并设置它们的样式。”%}



{%endblock%}`在此处输入代码`

在ExtJS

TextField

初始化期间，您需要将config选项

enableKeyEvents

设置为true。初始化字段后，需要将侦听器附加到其

keypress

事件。例如，您可以使用

addListener

方法来实现这一点。侦听器的处理程序应该是执行搜索的函数

有关

Ext.form.TextField

等的更多详细信息，请访问

<script type="text/javascript">
Ext.onReady(function(){

{% autoescape off %}
  var submitForm = function() {
      Ext.query('#search_form form')[0].submit();
  };
  var searchButton = new Ext.Button({renderTo: 'submit_search', text: '{% trans "Search" %}',
                                     handler: submitForm});
  var searchInput = new Ext.form.TextField({applyTo: 'search_query', width: 350});
{% endautoescape %}

});

</script> 


{% endblock %}

{% block nav %}
{% navbar maps %}
{% endblock %}

{% block main %}
<div class="twocol">

  <div id="search_form" class="block">
    <h2>{% trans "Search" %} <span class="subtitle">{% trans "for maps" %}</span></h2>

    <form action="{% url maps_search %}" method="POST">
      {% csrf_token %}
      <table>
        <tr>
          <td>
            <input type="text" id="search_query" name="q" />
          </td>
          <td>
            <div id="submit_search"></div>
          </td>
        </tr>
      </table>
      <p>
        <a href="{% url maps_search %}">{% trans "All Maps" %}</a> |
        <a href="{% url maps_search %}?sort=last_modified&dir=DESC">{% trans "New Maps" %}</a>
      </p>
    </form>
  </div>

  <div id="create" class="block">
    <h2>{% trans "Create Maps" %}</h2>
    <p>{% trans "Use GeoNode's Map Composer application to create your own maps.  Add layers from this GeoNode or remote services, and style them." %}
    </p>
    <p>
      <a href="{%url geonode.maps.views.newmap %}">{% trans "Create your own map" %}</a>
    </p>
  </div>

  <!-- "Your Maps" button goes here -->
  <!-- create map button goes here -->

</div>
{% endblock %}`enter code here`