Question

以下模板正在按用户搜索输入。它仅在按下输入或按搜索按钮时搜索。如何更改它，以便每次用户在搜索字段中输入字母（字符）时，搜索就会发生（无需等待用户按Enter或按搜索按钮）

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

Answer 1

在ExtJS TextField初始化期间，您需要将配置选项enableKeyEvents设置为true。字段初始化后，您需要将监听器附加到其keypress事件。例如，您可以使用addListener方法执行此操作。侦听器的处理程序应该是执行搜索的函数。

Ext.form.TextField等详细信息可以在ExtJS API documentation找到。

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

1 个答案: