<div id="sticky_agile_backlog_autocomplete">
  <div class="sticky_agile_backlog_autocomplete_wrap sticky">
    <label for="backlog_query_q"><%= l(:label_search) %>
      : </label><%= text_field_tag('easy_query_q', '', id: 'backlog_query_q') %>
  </div>
</div>
<div class="agile__backlog"></div>
<script type="text/javascript">
  (function () {
    var $backlog_query_q = $('#backlog_query_q');

    $backlog_query_q.keydown(function (e) {
      if (e.keyCode === 13) {
        getData($backlog_query_q.serializeArray());
      }
    });

    function getData(data) {
        easyLoaders.backlog(".agile__backlog", '<%= raw output_data_easy_queries_path(@query.to_params.merge(output: 'agile_backlog', project_id: @query.project, format: :json)) %>', data);
    }

    getData($backlog_query_q.serializeArray());
    var $search = $("#sticky_agile_backlog_autocomplete");
    var autoCompletes = [];

    window.easyView.sticky.add($search.find(".sticky_agile_backlog_autocomplete_wrap").css({
      textAlign: "center"
    }), {
      topOffset: 30,
      startOffset: 0,
      onCloneCreated: function ($clone) {
        if (autoCompletes.indexOf($clone) !== -1)return;
        autoCompletes.push($clone);
        window.easyUtils.autocomplete($clone, function () {
          getData($clone.find("input").serializeArray());
        });
      },
      bottomBreak: -5000
    });
  })();
</script>

