<form action="{{typeahead.action}}" data-bs-toggle="validator" class='form-inline my-2 my-md-0 my-xs-0 my-lg-0'>
<div class="control-group {{typeahead.class}}" style="{{typeahead.style}}">
  <div class="input-group">
      <button class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></button>
  {% for k,v in pairs(typeahead.parameters or {}) do %}
    <input type="hidden" name="{{k}}" value="{{v}}" />
  {% end %}
    <input id="{{typeahead.base_id}}_query" type="hidden" name="{{typeahead.query_field}}" data-ays-ignore="true"/>
    <input id="{{typeahead.base_id}}_search_field" type="text" data-minlength="1" class="form-control search-query span2" placeholder="{{typeahead.query_title}}" data-provide="typeahead" autocomplete="off"/>
  </div>
</div>

<script type='text/javascript'>
  var _typeahead_prototype = $.fn.typeahead.Constructor.prototype;
  var _typeahead_overridden_callbacks = {
    "click": null,
    "select": null,
  }

  /* Temporary override the typeahead click callback */
  for (var callback_name in _typeahead_overridden_callbacks) {
    /* Dump original callback */
    _typeahead_overridden_callbacks[callback_name] = _typeahead_prototype[callback_name];

    _typeahead_prototype[callback_name] = function() {
      if (this.$menu.find("> li[data-no-results]").length == 0) {
        /* invoke the original callback */
        _typeahead_overridden_callbacks[callback_name].apply(this, arguments);
      }
    };
  }

  $('#{{typeahead.base_id}}_search_field').typeahead({
    items: {*typeahead.max_items or 8*}, /* Max num of items, use "'all'" for unlimited */
    source: function (query, process) {
      /* Avoid this kind of queries which generates file path warnings into the ntopng log */
      if (query.startsWith(".")) return;

      var _get = {};
    {% for k,v in pairs(typeahead.parameters or {}) do %}
      _get["{{k}}"] = "{{v}}";
    {% end %}
      _get["query"] = query;

      return $.get("{*typeahead.query_url*}", _get, function (data) {
        var res = process(data.results);
        var menu = res.$menu;

        menu.click(function (e) { e.preventDefault(); });

        if (data.results && data.results.length > 0) {
          /* Fix for empty item appearing in the list */
          $("li:last a:empty", menu).remove();
        } else {
          $("li:last", menu)
            .attr("data-no-results", "")
            .html("<span style='padding-left:1em; cursor:default;'>No results found</span>");
        }

        return res;
      });
    }, afterSelect: function(item) {
      if (! item.no_results) {
        var form = $("#{{typeahead.base_id}}_query")
          .val(item["{{typeahead.json_key}}"])
          .closest("form");

        if ({*typeahead.before_submit or "$.noop"*}(form, item) !== "false")
          form.submit();
      }
    }, addItem: {name:"", no_results:true},
  });

  $('#{{typeahead.base_id}}_submit').click(function(e) {
    if ($('#{{typeahead.base_id}}_query').val() === '') {
      /* No typeahead result has been selected by the user */
      if($('#{{typeahead.base_id}}_search_field').val() === '' || "${{typeahead.allow_partial}}" !== "true") {
        /* Do not submit if also the typeahead content is empty or if we do not allow partial inputs */
        e.preventDefault();
      } else {
        /* Populate the search field with the user submitted values */
        $("#{{typeahead.base_id}}_query").val($('#{{typeahead.base_id}}_search_field').val());
      }
    }
  });

  /* Restore the original callbacks for new objects */
  for (var callback_name in _typeahead_overridden_callbacks)
    _typeahead_prototype[callback_name] = _typeahead_overridden_callbacks[callback_name];
</script>
</form>
