<div class="lot-filters">
  <h3>Choose a category</h3>
  {% from 'macros/_filters.html' import checkbox, lot_filters %}
  <ul>
  {% for lot in lots %}
    {% if lot.isActive %}
      <li>{{ lot.label }}</li>
    {% else %}
      <li><a href="{{ lot.url }}">{{ lot.label }}</a></li>
    {% endif %}
  {% endfor %}
  </ul>
</div>
<div class="govuk-option-select">
  <div class="container-head">
    <label class="option-select-label" for="keywords">
      Keywords
    </label>
  </div>
  <input class="filter-field-text" type="text" name="q" id="keywords" value="{{ search_keywords }}">
</div>
{% if current_lot %}
<input type="hidden" name="lot" value="{{ current_lot }}" />
{% endif %}
{% for filter_group in filter_groups %}
<div class="govuk-option-select">
  <div class="container-head js-container-head">
    <div class="option-select-label">{{ filter_group.label }}</div>
  </div>
  <div class="options-container">
    <div class='js-auto-height-inner'>
      {% for filter in filter_group.filters %}
        {{ checkbox(filter.label, filter.name, filter.id, filter.value, filter.isSet, 'js-search-results.info') }}
      {% endfor %}
    </div>
  </div>
</div>
{% endfor %}
<button class="button-save" type="submit">Filter</button>

<div class="lot-filters">
  <h3>Choose a category</h3>
  {% from 'macros/_filters.html' import checkbox, lot_filters %}
  <ul>
  {% for lot in lots %}
    {% if lot.isActive %}
      <li>{{ lot.label }}</li>
    {% else %}
      <li><a href="{{ lot.url }}">{{ lot.label }}</a></li>
    {% endif %}
  {% endfor %}
  </ul>
</div>
<div class="govuk-option-select">
  <div class="container-head">
    <label class="option-select-label" for="keywords">
      Keywords
    </label>
  </div>
  <input class="filter-field-text" type="text" name="q" id="keywords" value="{{ search_keywords }}" maxlength="200">
</div>
{% if current_lot %}
<input type="hidden" name="lot" value="{{ current_lot }}" />
{% endif %}
{% for filter_group in filter_groups %}
<div class="govuk-option-select">
  <div class="container-head js-container-head">
    <div class="option-select-label">{{ filter_group.label }}</div>
  </div>
  <div class="options-container">
    <div class='js-auto-height-inner'>
      {% for filter in filter_group.filters %}
        {{ checkbox(filter.label, filter.name, filter.id, filter.value, filter.isSet, 'js-search-results.info') }}
      {% endfor %}
    </div>
  </div>
</div>
{% endfor %}
<button class="button-save" type="submit">Filter</button>

Add maxlength attribute to keyword search element
Add maxlength attribute to keyword search element

Earlier IE versions limit the URL length to 2083 characters. To lessen
the risk of this affecting users this change limits the number of
characters that can be used in the search box to 200. From a sample of
1000 search queries the longest was 148.
