How to add a new event handling to the template?

The following template is doing a search on the input by user. It does search only on pressing enter or pressing search button. How i change it so that each time the user enters a letter(character) in the search field the search happens(not having to wait for the user to press enter or press search button)

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

---

During the ExtJS TextField initialization, you need to set config option enableKeyEvents to true. After the field has been initialized, you need to attach a listener to its keypress event. You can do this with the addListener method, for example. The handler for the listener should be a function that executes the search.

More details for Ext.form.TextField etc. can be found from ExtJS API documentation.