https://www.cvdvaccine.com/assets/autocomplete-country-selector.js

1(function($) {
2  if (!$('.country-listing-block .autocomplete').length) {
3    $('<div class="autocomplete"><input class="country-select" /><span class="clear"></span></div>').insertBefore('.country-listing-block .list-dropdown button');
4  }
5
6  function filterContent(wrapper) {
7    $(wrapper + ' input.country-select').on('keyup touchend', function() {
8      var inputVal = this.value;
9      var getValue = inputVal.toUpperCase().trim();
10      $(wrapper + ' .dropdown-content.show > a').hide().filter(function() {
11        return $(this).text().substr(0, inputVal.length).toUpperCase() === getValue;
12      }).show();
13
14      if ($(wrapper + ' .dropdown-content.show > a:visible').length === 0) {
15        $(wrapper + ' .dropdown-content.show .no-match').show();
16      } else {
17        $(wrapper + ' .dropdown-content.show .no-match').hide();
18      }
19
20      if (inputVal === '') {
21        if ($(wrapper + ' .dropdown-content.show .no-match').children('a').length) {
22          $(wrapper + ' .dropdown-content.show .no-match').show();
23        }
24      }
25    });
26  }
27
28  filterContent('.hcp-select-list');
29  filterContent('.non-hcp-select-list');
30  
31  $('.country-listing-block .dropdown-content a').on('click', function() {
32    var countryName = $(this).text();
33    $(this).parents('.list-dropdown').find('input.country-select').val(countryName);
34    $(this).parents('.list-dropdown').find('.dropdown-content').removeClass('show');
35    $(this).parents('.list-dropdown').find('.clear').addClass('show');
36  });
37  
38  $('.list-dropdown span.clear').on('click', function() {
39    $(this).parents('.autocomplete').siblings('button').show();
40    $(this).siblings('input').val('');
41    $(this).removeClass('show');
42  });
43
44  // Country selector dropdown.
45  $('.list-dropdown button').on('click', function(e) {
46    e.preventDefault();
47    $(this).hide();
48    $(this).siblings('.autocomplete').find('input').focus();
49    $(this).siblings('.dropdown-content').children('a').show();
50    if ($(this).siblings('.dropdown-content').find('.no-match').children('a').length) {
51      $(this).siblings('.dropdown-content').find('.no-match').show();
52    } else {
53      $(this).siblings('.dropdown-content').find('.no-match').hide();
54    }
55    if (!$(this).siblings('.dropdown-content').hasClass('show')) {
56      $('.list-dropdown .dropdown-content').removeClass('show');
57      $(this).siblings('.dropdown-content').addClass('show');
58    }
59  });
60
61  $('.country-listing-block .autocomplete input').on('focus', function() {
62    if ($(this).siblings('span').hasClass('show')) {
63      $(this).val('');
64      $(this).siblings('span').removeClass('show');
65    }
66    if ($(this).parent('.autocomplete').siblings('.dropdown-content').find('.no-match').children('a').length) {
67      $(this).parent('.autocomplete').siblings('.dropdown-content').find('.no-match').show();
68    }
69    $(this).parent('.autocomplete').siblings('.dropdown-content').children('a').show();
70    $(this).parent('.autocomplete').siblings('.dropdown-content').addClass('show');
71  });
72
73  $(document).click(function() {
74    $('.list-dropdown').each(function() {
75      if (!$(this).find('.clear').hasClass('show')) {
76        $(this).find('.country-select').val('');
77        $(this).find('button').show();
78        $(this).find('.dropdown-content').removeClass('show');
79        if (!$(this).find('.dropdown-content').find('.no-match').children('a').length) {
80          $(this).find('.dropdown-content').find('.no-match').hide();
81        }
82      }
83    });
84  });
85
86  $('.country-listing-block .list-dropdown').click(function(e) {
87    e.stopPropagation();
88  });
89})(jQuery);