index.html

{% extends 'base.html' %}

{% block title %}
{% if request.args.get('query', default=False) %}
  {{ _('Search results') }}
{% else %}
  {{ _('Search') }}
{% endif %}
- CritiqueBrainz
{% endblock %}

{% block content %}
<h3>{{ _('Search') }}</h3>

<form method="GET" class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input-query" class="col-sm-2 control-label">{{ _('Query') }}</label>
    <div class="col-sm-3">
      <input id="input-query" name="query" class="form-control" value="{{ request.args.get('query', default='') }}">
    </div>
  </div>
  <div class="form-group">
    <label for="type-selector" class="col-sm-2 control-label">{{ _('Type') }}</label>
    <div class="col-sm-2">
      <select id="type-selector" name="type" class="form-control">
        <option value="artist" {% if type=="artist" %}selected="selected"{% endif %}>{{ _('Artist') }}</option>
        <option value="release-group" {% if type=="release-group" %}selected="selected"{% endif %}>{{ _('Release group') }}</option>
        <option value="event" {% if type=="event" %}selected="selected"{% endif %}>{{ _('Event') }}</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">{{ _('Search') }}</button>
    </div>
  </div>
</form>

{% if request.args.get('query', default=False) %}
  <hr />
  {% if not results %}
    <p class="lead" style="text-align: center;">{{ _('No results found') }}</p>
  {% else %}

    <table class="table table-hover">
      <thead>
      {% if type=="artist" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Sort name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Country') }}</th>
        </tr>
      {% elif type=="event" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Artist') }}</th>
          <th>{{ _('Location') }}</th>
        </tr>
      {% elif type=="release-group" %}
        <tr>
          <th>{{ _('Release group') }}</th>
          <th>{{ _('Artist') }}</th>
          <th>{{ _('Type') }}</th>
        </tr>
      {% endif %}
      </thead>
      <tbody id="results">{% include 'search/results.html' %}</tbody>
    </table>

    {% if count > limit %}
      <div>
      <button id="more-button" type="button" class="btn btn-primary" onclick="load_more();" >{{ _('Load more results') }}</button>
      <span id="loading-message" class="text-muted" style="display:none;">{{ _('Loading more results...') }}</span>
    </div>
    {% endif %}

  {% endif %}
{% endif %}
{% endblock %}

{% if count > limit %}
  {% block scripts %}
    {{ super() }}
    <script src="{{ 'searchIndex.js'|make_static_path }}"></script> 
    <script>
      function load_more() {
        loading_more("{{ url_for('search.more') }}", "{{ query }}", "{{ type }}")
      }
    </script>
  {% endblock %}
{% endif %}

searchIndex.js

import $ from 'jquery';
require('./temp_searchIndex.js');

temp_searchIndex.js

var current_page = 0;
function loading_more(url, query, type) {
	console.log(1);
var more_button = $("#more-button");
var loading_message = $("#loading-message");
more_button.hide();
loading_message.show();
$.ajax({
  url,
  data: { query, type, page: ++current_page }
})
    .done(function(data) {
      loading_message.hide();
      $("#results").append(data.results);
      if (data.more === true) more_button.show();
    })
    .fail(alertFail(tojson));
}