text: import $ from 'jquery';
  import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result';
  import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
  import { deprecatedCreateFlash as Flash } from '~/flash';
  import Api from '~/api';
  import { __ } from '~/locale';
  import Project from '~/pages/projects/project';
  import { visitUrl, queryToObject } from '~/lib/utils/url_utility';
  import refreshCounts from './refresh_counts';
  
  export default class Search {
    constructor() {
      setHighlightClass(); // Code Highlighting
      const $projectDropdown = $('.js-search-project-dropdown');
  
      this.searchInput = '.js-search-input';
      this.searchClear = '.js-search-clear';
  
      const query = queryToObject(window.location.search);
      this.groupId = query?.group_id;
      this.eventListeners();
      refreshCounts();
  
      initDeprecatedJQueryDropdown($projectDropdown, {
        selectable: true,
        filterable: true,
        filterRemote: true,
        fieldName: 'project_id',
        search: {
          fields: ['name'],
        },
        data: (term, callback) => {
          this.getProjectsData(term)
            .then(data => {
              data.unshift({
                name_with_namespace: __('Any'),
              });
              data.splice(1, 0, { type: 'divider' });
  
              return data;
            })
            .then(data => callback(data))
            .catch(() => new Flash(__('Error fetching projects')));
        },
        id(obj) {
          return obj.id;
        },
        text(obj) {
          return obj.name_with_namespace;
        },
        clicked: () => Search.submitSearch(),
      });
  
      Project.initRefSwitcher();
    }
  
    eventListeners() {
      $(document)
        .off('keyup', this.searchInput)
        .on('keyup', this.searchInput, this.searchKeyUp);
      $(document)
        .off('click', this.searchClear)
        .on('click', this.searchClear, this.clearSearchField.bind(this));
  
      $('a.js-search-clear')
        .off('click', this.clearSearchFilter)
        .on('click', this.clearSearchFilter);
    }
  
    static submitSearch() {
      return $('.js-search-form').submit();
    }
  
    searchKeyUp() {
      const $input = $(this);
      if ($input.val() === '') {
        $('.js-search-clear').addClass('hidden');
      } else {
        $('.js-search-clear').removeClass('hidden');
      }
    }
  
    clearSearchField() {
      return $(this.searchInput)
        .val('')
        .trigger('keyup')
        .focus();
    }
  
    // We need to manually follow the link on the anchors
    // that have this event bound, as their `click` default
    // behavior is prevented by the toggle logic.
    /* eslint-disable-next-line class-methods-use-this */
    clearSearchFilter(ev) {
      const $target = $(ev.currentTarget);
  
      visitUrl($target.href);
      ev.stopPropagation();
    }
  
    getProjectsData(term) {
      return new Promise(resolve => {
        if (this.groupId) {
          Api.groupProjects(this.groupId, term, {}, resolve);
        } else {
          Api.projects(
            term,
            {
              order_by: 'id',
            },
            resolve,
          );
        }
      });
    }
  }
  