home/templates/all_results.html

{% extends 'base.html' %}

{% block title %}All Survey Results{% endblock %}

{% block content %}
<div class="section">
    <h2 class="header center teal-text text-darken-2">All Survey Results</h2>

    <div class="row">
        <div class="col s12">
            <div class="input-field">
                <i class="material-icons prefix">search</i>
                <input type="text" id="search" onkeyup="filterSurveys()">
                <label for="search">Search Surveys</label>
            </div>
        </div>
    </div>

    <ul class="collection with-header" id="survey-list">
        <li class="collection-header"><h4>Surveys</h4></li>
        {% for feedback in feedbacks %}
        <li class="collection-item avatar">
            <i class="material-icons circle teal">assessment</i>
            <span class="title">{{ feedback.title }}</span>
            <p>{{ feedback.description|default:"No description available."|truncatewords:15 }}</p>
            <a href="{% url 'survey_results' feedback.id %}" class="secondary-content btn-floating btn-large waves-effect waves-light teal"><i class="material-icons">bar_chart</i></a>
        </li>
        {% empty %}
        <li class="collection-item">
            <div class="card-panel teal lighten-5">
                <span class="teal-text text-darken-4">No surveys found.</span>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>

<script>
    function filterSurveys() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById('search');
        filter = input.value.toUpperCase();
        ul = document.getElementById("survey-list");
        li = ul.getElementsByTagName('li');

        for (i = 0; i < li.length; i++) {
            if (li[i].classList.contains('collection-header')) continue;
            a = li[i].getElementsByTagName("span")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>
{% endblock %}