combo/combo/apps/search/templates/combo/search-cell.html

58 lines
1.8 KiB
HTML

{% load i18n %}
{% block cell-content %}
<form id="combo-search-form-{{ cell.pk }}" class="combo-search-form">
<input type="search" name="q" autocomplete="off" id="combo-search-input-{{ cell.pk }}" class="combo-search-input" />
<button class="submit-button">{% trans "Search" %}</button>
</form>
{% for search_service in cell.search_services %}
<div id="combo-search-results-{{ cell.pk }}-{{ forloop.counter }}" class="combo-search-results combo-search-results-{{ search_service.slug }}"></div>
{% endfor %}
<script>
$(function() {
var timeout;
var $form = $('#combo-search-form-{{ cell.pk }}');
var $input = $('#combo-search-input-{{ cell.pk }}');
{% for search_service in cell.search_services %}
var $results_{{ forloop.counter }} = $('#combo-search-results-{{ cell.pk }}-{{ forloop.counter }}');
var xhr_{{ forloop.counter }} = null;
var url_{{ forloop.counter }} = '{% url 'combo-search-ajax-results' cell_pk=cell.pk service_slug=search_service.slug %}{% if initial_query_string %}?{{ initial_query_string }}{% endif %}';
{% endfor %}
function update() {
{% for search_service in cell.search_services %}
if (xhr_{{ forloop.counter }}) xhr_{{ forloop.counter }}.abort();
xhr_{{ forloop.counter }} = $.get(url_{{ forloop.counter }},
{'q': $input.val()},
function (response) {
xhr_{{ forloop.counter }} = null;
$results_{{ forloop.counter }}.html(response);
}
);
{% endfor %}
};
$input.on('paste keyup', function() {
clearTimeout(timeout);
timeout = setTimeout(update, 300);
});
$input.on('change', function() {
clearTimeout(timeout);
update(this);
});
$form.on('submit', function() {
clearTimeout(timeout);
update();
return false;
});
{% if initial_q %}
$input.val('{{ initial_q }}');
update();
{% endif %}
});
</script>
{% endblock %}