ur_links.html

{% extends "layout.html" %}
{% block body %}

{% if urls %}
<form method="get" class="margin-bottom input-group" action="/" id="search-form">
  <input id="search-term" autofocus placeholder="search your links" class="form-control input-lg" type="text" name="term">
  <span class="input-group-btn">
    <select name="type" id="search-type" class="selectpicker form-control input-lg">
      <option value="">Any Type</option>
      {% for option in options %}
        <option value="{{ option }}">{{ option }}</option>
      {% endfor %}
    </select>
  </span>
  <span class="input-group-btn">
    <button type="submit" class="btn btn-lg"><span class="glyphicon glyphicon-search"></span></button>
  </span>
</form>

    <div id="url-list" class="list-group">
    {% for url in urls %}<a href="{{ url.url }}">
      <a href="{{ url.url }}" class="list-group-item list-group-item-action {% if url.content_type %}{{ url.content_type|replace('/', '-')}}{% endif %}">
        {% if url.content_type %}<span class="badge">{{ url.content_type }}</span>{% endif %}
        <h3 id="url-{{ url.id }}" class="list-group-item-heading h4">
          {% if url.title %}
            {{ url.title }} <small>({{ url.url }})</small>
          {% else %}
            {{ url.url }}
          {% endif %}
        </h3>
        <p class="list-group-item-text">{{ url.description }}</p>
      </a>
    {% endfor %}
    </div>
    <script>
        // what about filter by type after click???
      function autocomplete_results() {
        var suggestUri = '/autocomplete?term=' + encodeURIComponent($("#search-term").val()) + '&type=' + encodeURIComponent($("#search-type").val());

        $.getJSON(suggestUri, function (json) {
          // first empty the url list
          $("#url-list").empty();

          // now we insert each url list item from
          // the JSON results
          $(json).each(function(index, item) {
            // first we create an item, so we can later add its contents,
            // finally appending to the list.
            var newAnchor = $(document.createElement('a')).addClass("list-group-item list-group-item-action").attr('href', item.url);

            // add content_type
            if (item.content_type) {
                newAnchor.append("<span class='badge'>" + item.content_type + "</span>");
            }

            // the heading, which is also the actual URL/link
            if (item.title) {
                newAnchor.append("<h3 class='list-group-item-heading h4'>" + item.title + " <small>(" + item.url + ")</small></h3>");
            } else {
                newAnchor.append("<h3 class='list-group-item-heading h4'>" + item.url + "</h3>");
            }

            // add description
            newAnchor.append("<p class='list-group-item-text'>" + item.description + "</p>");

            // ... finally add it to the url list
            $("#url-list").append(newAnchor);
          });
        }); // getJSON
      }
      function badgeClickHandler() {
        $("#search-type").val($(this).text());
        autocomplete_results();
      }
      $("#search-type").change(autocomplete_results);
      $("#search-term").keyup(autocomplete_results);
      // $("#url-list").on('click', ".badge", badgeClickHandler);
    </script>
{% else %}
    <h2>No URLs!</h2>
    <p>You have no urls!</p>
{% endif %}

{% endblock %}