Navigate into layer using arrow key

Question

I am trying to build some functionality (using JQuery) into a custom built auto complete layer. I want the user to be able to arrow down into the layer and then back up again into the input box (which triggered the layer in the first place). The code below will show you that you can actually arrow/up and down the list and select an item but I have 3 issues:

1) When you arrow down the window also scrolls down with it even though I added prevent default

2) When you get to the end of the list it loops back round. It needs to stop at the end

3) When you go back to the first element in the list - then the next UP action - should take you back into the input box.

// Arrow up and down controls
window.displayBoxIndex = -1;

jQuery("#searchForm").keyup(function(e) {
  if (e.keyCode == 40) {
    e.preventDefault();
    Navigate(1);
  }
  if (e.keyCode == 38) {
    e.preventDefault();
    Navigate(-1);
  }
});

var Navigate = function(diff) {
  displayBoxIndex += diff;
  var oBoxCollection = jQuery(".ac-list");
  if (displayBoxIndex >= oBoxCollection.length)
    displayBoxIndex = 0;
  if (displayBoxIndex < 0)
    displayBoxIndex = oBoxCollection.length - 1;
  var cssClass = "selected";
  oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass).children('a').focus();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchForm">
  <textarea accesskey="4" placeholder="Enter search terms..." id="searchTerm" name="searchTerm"></textarea>
  <div id="autoComplete">
    <ul>
      <li class="ac-list"><a href="#">Link 1</a></li>
      <li class="ac-list"><a href="#">Link 2</a></li>
      <li class="ac-list"><a href="#">Link 3</a></li>
      <li class="ac-list"><a href="#">Link 4</a></li>
      <li class="ac-list"><a href="#">Link 5</a></li>
      <li class="ac-list"><a href="#">etc...</a></li>
    </ul>
  </div>
</form>

Answer 1

Here's a workaround to get your goal achieved :

Q1 : "When you arrow down the window also scrolls down with it even though I added prevent default"

A : a long answer that can be applied (parts of it) to the other question. That's the logic behavior to occur when pressing arrow keys and you have attached a keyup listener but that event can't be undone as the key is already pressed :

• keyup can catch arrow keys but can't be undone ==> not an option.

• keypress can be undone but can't catch arrow keys ==> not an option.

• keydown can catch arrow keys and can be undone ==> what we need, perfect.

  So keydown is the qualified event but so let's assume you changed the events to keydown :

• imagine you have focused the textarea#searchTerm and pressed the down arrow to start navigating in the autocomplete box, the event won't trigger (due to preventDefault call).

• we can't even start navigating with arrow keys after calling preventDefault.

A solution is to think a bit wisely :

• attach a keydown handler to the window that checks if the current focused element in the page ($(document.activeElement)) is either the form#searchForm or one of its children (like the autocomplete items) and the key that being pressed is the up/down arrow then we prevent that event thus no scrolling down when scrolling into the autocomplete list.
• attach a keydown handler to the form#searchForm that sees if the key pressed isn't up/down arrow then stop the event propagation to prevent getting bubbled to the window thus allowing us to write and navigate in the autocomplete list (remember we have preventDefault called in the handler for the window that can prevent us from writing).
• a final handler for keydown attached to textarea#searchTerm (even though an input[type="text"] seems to be more suitable preventing line breaks, that may appear in a textarea, at least) that has a simple and important task which is while focusing (writing in) the field and the up arrow gets pressed we don't allow the autocomplete list last item to be selected.

the ordering when adding these handlers is very important : first attch form#searchForm handler, textarea#searchTerm's and then the handler for the window.

Q2 : "When you get to the end of the list it loops back round. It needs to stop at the end"

A : in the Navigate function we see if the displayBoxIndex variable (that tracks which item to be selected) has reached the last item and the down arrow was pressed then we just return to quit the function.

Q3 : "When you go back to the first element in the list - then the next UP action - should take you back into the input box"

A : also in the Navigate function we check if displayBoxIndex variable is at the first item and the up arrow was pressed then we trigger focus for the text field, remove the selected class from the autocomplete items, reset displayBoxIndex variable to -1 (ensuring we start from the first item when the down arrow gets pressed while typing) and finally return to halt the function.

this line displayBoxIndex += diff must appear after the above two condition in order to get correct calculation for which element we're selecting and the next one to be selected.

So, here's a demo to illustrate, it contains a wealth of helpful comments that may assist you while reading, also some covers some changes made into the code that I didn't cover above :

const form = $('#searchForm'),
  searchTerm = $('#searchTerm'),
  autoc = $('#autoComplete'),
  jqWin = jQuery(window),
  oBoxCollection = jQuery('.ac-list'),
  cssClass = 'selected',
  Navigate = diff => {
    /** focus the text field when in the first item and the up arrow was pressed **/
    if (displayBoxIndex === 0 && diff === -1) {
      searchTerm.trigger('focus');
      oBoxCollection.removeClass(cssClass);
      displayBoxIndex = -1;
      return;
    }
    /** prevent looping back when reached the last item in the autocomplete box **/
    if (displayBoxIndex === oBoxCollection.length - 1 && diff == 1) return;

    /** make the navigation **/
    displayBoxIndex += diff;
    oBoxCollection.removeClass(cssClass)
      .eq(displayBoxIndex)
      .addClass(cssClass)
      .children('a')
      .focus();
  };

let displayBoxIndex = -1;

/** attaching events with respect of ordering **/

/** 1: keydown listener on the form **/
form.on('keydown', e => {
  const upOrDown = [38, 40].indexOf(e.which) != -1;
  /** is it the up/down key  **/
  !upOrDown && (e.stopPropagation());
  /** if no (another key) just stop the event propagation so the one attached to the window won't be fired **/
  upOrDown && (Navigate(e.which == 40 ? 1 : -1));
  /** if yes we call we call Navigate (if we gets here to the ternary operator the e.which is either 40 or 38) **/
  e.which == 27 && (autoc.slideUp(400, () => {
    searchTerm.blur();
    displayBoxIndex = -1;
    oBoxCollection.removeClass(cssClass);
  }));
});

/** 2: keydown listener on the text field **/

/** prevent going to the list box bottom when pressing up arrow **/
searchTerm.on({
  keydown: e => {
    e.which == 38 && (e.stopPropagation());
  },
  focus: e => {
    /** show the autocomplete box if is hidden **/
    autoc.is(':hidden') && (autoc.slideDown(400));
    displayBoxIndex = -1;
  } /** reset navigation position (resets to the first item in the autocomplete box) when the text field is focus **/
});

/** 3: keydown listener on the window **/
jqWin.on('keydown', e => {
  const focus = $(document.activeElement);
  /** get the current focused element in the page **/
  [38, 40].indexOf(e.which) != -1 && (focus.is('#searchForm') ||
    form.has(focus).length) && (e.preventDefault());
  /** prevent scroll when navigating in the autocomplete box (the scrolling you asked about in your first question) **/
});

/** basic styling to appear like a real autocomplete box. Doesn't affect the main functionality required **/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 300vh;
}

.wrapper {
  position: relative;
  display: flex;
  width: 250px;
  justify-content: center;
  align-items: flex-start;
  margin: 15px auto;
}

.wrapper textarea {
  display: block;
  width: 100%;
  height: 35px;
  padding: 8px 4px;
  border: 2px solid #181818;
  resize: none;
  transition: all .4s 0s ease;
}

.wrapper textarea:focus {
  background-color: #ccc;
}

.wrapper #autoComplete {
  position: absolute;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  top: 100%;
  left: 0;
  box-shadow: 0 8px 25px -8px rgba(24, 24, 24, .6);
}

.wrapper ul {
  list-style-type: none;
  background-color: #181818;
}

.wrapper ul li {
  display: block;
  margin-bottom: 4px;
  transition: all .4s 0s ease;
}

.wrapper ul li:last-child {
  margin-bottom: 0;
}

.wrapper ul li:hover,
.selected {
  background-color: #f00;
}

.wrapper ul li a {
  display: block;
  padding: 4px 15px;
  color: #fff;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- added a wrapper div in the form just to simplify the styling it has nothing related to the functionality -->
<form id="searchForm">
  <div class="wrapper">
    <textarea placeholder="Enter search terms..." id="searchTerm" name="searchTerm"></textarea>
    <div id="autoComplete">
      <ul>
        <li class="ac-list"><a href="#">autocomplete item 1</a></li>
        <li class="ac-list"><a href="#">autocomplete item 2</a></li>
        <li class="ac-list"><a href="#">autocomplete item 3</a></li>
        <li class="ac-list"><a href="#">autocomplete item 4</a></li>
        <li class="ac-list"><a href="#">autocomplete item 5</a></li>
        <li class="ac-list"><a href="#">autocomplete item 6</a></li>
        <li class="ac-list"><a href="#">autocomplete item 7</a></li>
        <li class="ac-list"><a href="#">autocomplete item 8</a></li>
        <li class="ac-list"><a href="#">autocomplete item 9</a></li>
        <li class="ac-list"><a href="#">autocomplete item 10</a></li>
      </ul>
    </div>
  </div>
</form>

Hope I managed to provide some help.

Answer 2

Focusing

From MDN: Only one element per window has the focus at a time.

So, the search box and any list element cant be focused at a time. But some autocomplete plugins like select2 having a solution for this. They just toggle a class to set an active list element.

Here the class active used to highlight the selected list element.

Navigating

Navigation becomes tricky when the search box has a value. Here the :visible and :first along with the nextAll() / prevAll() helps to select first visible list element

Searching and Highlighting

Searching loops through the list and toggle the visibility of the list. Highlighting uses the regex replace and mark tag.

Complete working demo with search

$('#searchTerm').on('keydown', function(e) {
  var $allLinks = $('#autoComplete .ac-list');
  var $visibleLinks = $allLinks.filter(':visible');
  var $activeLink = $visibleLinks.filter('.active');
  console.log(e.originalEvent.code)

  if (e.which === 40) { // ArrowDown
    $allLinks.removeClass('active');
    $activeLink = $activeLink.nextAll(':visible:first').addClass('active');
    if ($activeLink.length === 0) {
      $activeLink = $visibleLinks.first().addClass('active'); // to beginning of list
    }
    e.preventDefault();
  } else if (e.which === 38) { // ArrowUp
    $allLinks.removeClass('active');
    $activeLink = $activeLink.prevAll(':visible:first').addClass('active');
    if ($activeLink.length === 0) {
      $activeLink = $visibleLinks.last().addClass('active'); // to end of list
    }
    e.preventDefault();
  } else if (e.which === 13) { // Enter
    $activeLink.trigger('click');
  }

  if ($activeLink.get(0)) {
    $activeLink.get(0).scrollIntoView({
      behavior: 'instant',
      block: 'nearest'
    });
  }
});

$('#searchTerm').on('keyup', function() {
  var value = this.value.replace(/[\W_]+/g, " ").trim();
  if (this.prevValue === value) return;
  this.prevValue = value;
  $('.ac-list').each(function() {
    var $this = $(this);
    if ($this.text().search(new RegExp(value, "i")) > -1) {
      $this.show()
      .find('a').html(this.innerText.replace(new RegExp(value + '(?!([^<]+)?<)', "gi"), '<mark>$&</mark>')); // highloghts the searched text
    } else {
      $this.hide();
    }
  });
});

.active {
  background: #5897fb;
}


/* theming */

#searchForm {
  width: 200px;
}

#searchTerm {
  width: 100%;
}

#autoComplete {
  max-height: 150px;
  overflow-y: auto;
}

#autoComplete ul {
  padding-left: 0;
}

#autoComplete ul li {
  display: block;
  padding: 5px;
}

#autoComplete ul li a {
  text-decoration: none;
}

#autoComplete ul li.active a {
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="searchForm">
  <input type="search" placeholder="Enter search terms..." id="searchTerm" name="searchTerm">
  <div id="autoComplete">
    <ul>
      <li class="ac-list"><a href="#">Afghanistan</a></li>
      <li class="ac-list"><a href="#">Åland Islands</a></li>
      <li class="ac-list"><a href="#">Albania</a></li>
      <li class="ac-list"><a href="#">Algeria</a></li>
      <li class="ac-list"><a href="#">American Samoa</a></li>
      <li class="ac-list"><a href="#">AndorrA</a></li>
      <li class="ac-list"><a href="#">Angola</a></li>
      <li class="ac-list"><a href="#">Anguilla</a></li>
      <li class="ac-list"><a href="#">Antarctica</a></li>
      <li class="ac-list"><a href="#">Antigua and Barbuda</a></li>
      <li class="ac-list"><a href="#">Argentina</a></li>
      <li class="ac-list"><a href="#">Armenia</a></li>
      <li class="ac-list"><a href="#">Aruba</a></li>
      <li class="ac-list"><a href="#">Australia</a></li>
      <li class="ac-list"><a href="#">Austria</a></li>
      <li class="ac-list"><a href="#">Azerbaijan</a></li>
      <li class="ac-list"><a href="#">Bahamas</a></li>
      <li class="ac-list"><a href="#">Bahrain</a></li>
      <li class="ac-list"><a href="#">Bangladesh</a></li>
      <li class="ac-list"><a href="#">Barbados</a></li>
      <li class="ac-list"><a href="#">Belarus</a></li>
      <li class="ac-list"><a href="#">Belgium</a></li>
      <li class="ac-list"><a href="#">Belize</a></li>
      <li class="ac-list"><a href="#">Benin</a></li>
      <li class="ac-list"><a href="#">Bermuda</a></li>
      <li class="ac-list"><a href="#">Bhutan</a></li>
      <li class="ac-list"><a href="#">Bolivia</a></li>
      <li class="ac-list"><a href="#">Bosnia and Herzegovina</a></li>
      <li class="ac-list"><a href="#">Botswana</a></li>
      <li class="ac-list"><a href="#">Bouvet Island</a></li>
      <li class="ac-list"><a href="#">Brazil</a></li>
      <li class="ac-list"><a href="#">British Indian Ocean Territory</a></li>
      <li class="ac-list"><a href="#">Brunei Darussalam</a></li>
      <li class="ac-list"><a href="#">Bulgaria</a></li>
      <li class="ac-list"><a href="#">Burkina Faso</a></li>
      <li class="ac-list"><a href="#">Burundi</a></li>
      <li class="ac-list"><a href="#">Cambodia</a></li>
      <li class="ac-list"><a href="#">Cameroon</a></li>
      <li class="ac-list"><a href="#">Canada</a></li>
      <li class="ac-list"><a href="#">Cape Verde</a></li>
      <li class="ac-list"><a href="#">Cayman Islands</a></li>
      <li class="ac-list"><a href="#">Central African Republic</a></li>
      <li class="ac-list"><a href="#">Chad</a></li>
      <li class="ac-list"><a href="#">Chile</a></li>
      <li class="ac-list"><a href="#">China</a></li>
      <li class="ac-list"><a href="#">Christmas Island</a></li>
      <li class="ac-list"><a href="#">Cocos (Keeling) Islands</a></li>
      <li class="ac-list"><a href="#">Colombia</a></li>
      <li class="ac-list"><a href="#">Comoros</a></li>
      <li class="ac-list"><a href="#">Congo</a></li>
      <li class="ac-list"><a href="#">Cook Islands</a></li>
      <li class="ac-list"><a href="#">Costa Rica</a></li>
      <li class="ac-list"><a href="#">Cote D'Ivoire</a></li>
      <li class="ac-list"><a href="#">Croatia</a></li>
      <li class="ac-list"><a href="#">Cuba</a></li>
      <li class="ac-list"><a href="#">Cyprus</a></li>
      <li class="ac-list"><a href="#">Czech Republic</a></li>
      <li class="ac-list"><a href="#">Denmark</a></li>
      <li class="ac-list"><a href="#">Djibouti</a></li>
      <li class="ac-list"><a href="#">Dominica</a></li>
      <li class="ac-list"><a href="#">Dominican Republic</a></li>
      <li class="ac-list"><a href="#">Ecuador</a></li>
      <li class="ac-list"><a href="#">Egypt</a></li>
      <li class="ac-list"><a href="#">El Salvador</a></li>
      <li class="ac-list"><a href="#">Equatorial Guinea</a></li>
      <li class="ac-list"><a href="#">Eritrea</a></li>
      <li class="ac-list"><a href="#">Estonia</a></li>
      <li class="ac-list"><a href="#">Ethiopia</a></li>
      <li class="ac-list"><a href="#">Falkland Islands (Malvinas)</a></li>
      <li class="ac-list"><a href="#">Faroe Islands</a></li>
      <li class="ac-list"><a href="#">Fiji</a></li>
      <li class="ac-list"><a href="#">Finland</a></li>
      <li class="ac-list"><a href="#">France</a></li>
      <li class="ac-list"><a href="#">French Guiana</a></li>
      <li class="ac-list"><a href="#">French Polynesia</a></li>
      <li class="ac-list"><a href="#">French Southern Territories</a></li>
      <li class="ac-list"><a href="#">Gabon</a></li>
      <li class="ac-list"><a href="#">Gambia</a></li>
      <li class="ac-list"><a href="#">Georgia</a></li>
      <li class="ac-list"><a href="#">Germany</a></li>
      <li class="ac-list"><a href="#">Ghana</a></li>
      <li class="ac-list"><a href="#">Gibraltar</a></li>
      <li class="ac-list"><a href="#">Greece</a></li>
      <li class="ac-list"><a href="#">Greenland</a></li>
      <li class="ac-list"><a href="#">Grenada</a></li>
      <li class="ac-list"><a href="#">Guadeloupe</a></li>
      <li class="ac-list"><a href="#">Guam</a></li>
      <li class="ac-list"><a href="#">Guatemala</a></li>
      <li class="ac-list"><a href="#">Guernsey</a></li>
      <li class="ac-list"><a href="#">Guinea</a></li>
      <li class="ac-list"><a href="#">Guinea-Bissau</a></li>
      <li class="ac-list"><a href="#">Guyana</a></li>
      <li class="ac-list"><a href="#">Haiti</a></li>
      <li class="ac-list"><a href="#">Heard Island and Mcdonald Islands</a></li>
      <li class="ac-list"><a href="#">Holy See (Vatican City State)</a></li>
      <li class="ac-list"><a href="#">Honduras</a></li>
      <li class="ac-list"><a href="#">Hong Kong</a></li>
      <li class="ac-list"><a href="#">Hungary</a></li>
      <li class="ac-list"><a href="#">Iceland</a></li>
      <li class="ac-list"><a href="#">India</a></li>
      <li class="ac-list"><a href="#">Indonesia</a></li>
      <li class="ac-list"><a href="#">Iran, Islamic Republic Of</a></li>
      <li class="ac-list"><a href="#">Iraq</a></li>
      <li class="ac-list"><a href="#">Ireland</a></li>
      <li class="ac-list"><a href="#">Isle of Man</a></li>
      <li class="ac-list"><a href="#">Israel</a></li>
      <li class="ac-list"><a href="#">Italy</a></li>
      <li class="ac-list"><a href="#">Jamaica</a></li>
      <li class="ac-list"><a href="#">Japan</a></li>
      <li class="ac-list"><a href="#">Jersey</a></li>
      <li class="ac-list"><a href="#">Jordan</a></li>
      <li class="ac-list"><a href="#">Kazakhstan</a></li>
      <li class="ac-list"><a href="#">Kenya</a></li>
      <li class="ac-list"><a href="#">Kiribati</a></li>
      <li class="ac-list"><a href="#">Korea, Republic of</a></li>
      <li class="ac-list"><a href="#">Kuwait</a></li>
      <li class="ac-list"><a href="#">Kyrgyzstan</a></li>
      <li class="ac-list"><a href="#">Lao People'S Democratic Republic</a></li>
      <li class="ac-list"><a href="#">Latvia</a></li>
      <li class="ac-list"><a href="#">Lebanon</a></li>
      <li class="ac-list"><a href="#">Lesotho</a></li>
      <li class="ac-list"><a href="#">Liberia</a></li>
      <li class="ac-list"><a href="#">Libyan Arab Jamahiriya</a></li>
      <li class="ac-list"><a href="#">Liechtenstein</a></li>
      <li class="ac-list"><a href="#">Lithuania</a></li>
      <li class="ac-list"><a href="#">Luxembourg</a></li>
      <li class="ac-list"><a href="#">Macao</a></li>
      <li class="ac-list"><a href="#">Macedonia, The Former Yugoslav Republic of</a></li>
      <li class="ac-list"><a href="#">Madagascar</a></li>
      <li class="ac-list"><a href="#">Malawi</a></li>
      <li class="ac-list"><a href="#">Malaysia</a></li>
      <li class="ac-list"><a href="#">Maldives</a></li>
      <li class="ac-list"><a href="#">Mali</a></li>
      <li class="ac-list"><a href="#">Malta</a></li>
      <li class="ac-list"><a href="#">Marshall Islands</a></li>
      <li class="ac-list"><a href="#">Martinique</a></li>
      <li class="ac-list"><a href="#">Mauritania</a></li>
      <li class="ac-list"><a href="#">Mauritius</a></li>
      <li class="ac-list"><a href="#">Mayotte</a></li>
      <li class="ac-list"><a href="#">Mexico</a></li>
      <li class="ac-list"><a href="#">Micronesia, Federated States of</a></li>
      <li class="ac-list"><a href="#">Moldova, Republic of</a></li>
      <li class="ac-list"><a href="#">Monaco</a></li>
      <li class="ac-list"><a href="#">Mongolia</a></li>
      <li class="ac-list"><a href="#">Montserrat</a></li>
      <li class="ac-list"><a href="#">Morocco</a></li>
      <li class="ac-list"><a href="#">Mozambique</a></li>
      <li class="ac-list"><a href="#">Myanmar</a></li>
      <li class="ac-list"><a href="#">Namibia</a></li>
      <li class="ac-list"><a href="#">Nauru</a></li>
      <li class="ac-list"><a href="#">Nepal</a></li>
      <li class="ac-list"><a href="#">Netherlands</a></li>
      <li class="ac-list"><a href="#">Netherlands Antilles</a></li>
      <li class="ac-list"><a href="#">New Caledonia</a></li>
      <li class="ac-list"><a href="#">New Zealand</a></li>
      <li class="ac-list"><a href="#">Nicaragua</a></li>
      <li class="ac-list"><a href="#">Niger</a></li>
      <li class="ac-list"><a href="#">Nigeria</a></li>
      <li class="ac-list"><a href="#">Niue</a></li>
      <li class="ac-list"><a href="#">Norfolk Island</a></li>
      <li class="ac-list"><a href="#">Northern Mariana Islands</a></li>
      <li class="ac-list"><a href="#">Norway</a></li>
      <li class="ac-list"><a href="#">Oman</a></li>
      <li class="ac-list"><a href="#">Pakistan</a></li>
      <li class="ac-list"><a href="#">Palau</a></li>
      <li class="ac-list"><a href="#">Palestinian Territory, Occupied</a></li>
      <li class="ac-list"><a href="#">Panama</a></li>
      <li class="ac-list"><a href="#">Papua New Guinea</a></li>
      <li class="ac-list"><a href="#">Paraguay</a></li>
      <li class="ac-list"><a href="#">Peru</a></li>
      <li class="ac-list"><a href="#">Philippines</a></li>
      <li class="ac-list"><a href="#">Pitcairn</a></li>
      <li class="ac-list"><a href="#">Poland</a></li>
      <li class="ac-list"><a href="#">Portugal</a></li>
      <li class="ac-list"><a href="#">Puerto Rico</a></li>
      <li class="ac-list"><a href="#">Qatar</a></li>
      <li class="ac-list"><a href="#">Reunion</a></li>
      <li class="ac-list"><a href="#">Romania</a></li>
      <li class="ac-list"><a href="#">Russian Federation</a></li>
      <li class="ac-list"><a href="#">RWANDA</a></li>
      <li class="ac-list"><a href="#">Saint Helena</a></li>
      <li class="ac-list"><a href="#">Saint Kitts and Nevis</a></li>
      <li class="ac-list"><a href="#">Saint Lucia</a></li>
      <li class="ac-list"><a href="#">Saint Pierre and Miquelon</a></li>
      <li class="ac-list"><a href="#">Saint Vincent and the Grenadines</a></li>
      <li class="ac-list"><a href="#">Samoa</a></li>
      <li class="ac-list"><a href="#">San Marino</a></li>
      <li class="ac-list"><a href="#">Sao Tome and Principe</a></li>
      <li class="ac-list"><a href="#">Saudi Arabia</a></li>
      <li class="ac-list"><a href="#">Senegal</a></li>
      <li class="ac-list"><a href="#">Serbia and Montenegro</a></li>
      <li class="ac-list"><a href="#">Seychelles</a></li>
      <li class="ac-list"><a href="#">Sierra Leone</a></li>
      <li class="ac-list"><a href="#">Singapore</a></li>
      <li class="ac-list"><a href="#">Slovakia</a></li>
      <li class="ac-list"><a href="#">Slovenia</a></li>
      <li class="ac-list"><a href="#">Solomon Islands</a></li>
      <li class="ac-list"><a href="#">Somalia</a></li>
      <li class="ac-list"><a href="#">South Africa</a></li>
      <li class="ac-list"><a href="#">Spain</a></li>
      <li class="ac-list"><a href="#">Sri Lanka</a></li>
      <li class="ac-list"><a href="#">Sudan</a></li>
      <li class="ac-list"><a href="#">Suriname</a></li>
      <li class="ac-list"><a href="#">Svalbard and Jan Mayen</a></li>
      <li class="ac-list"><a href="#">Swaziland</a></li>
      <li class="ac-list"><a href="#">Sweden</a></li>
      <li class="ac-list"><a href="#">Switzerland</a></li>
      <li class="ac-list"><a href="#">Syrian Arab Republic</a></li>
      <li class="ac-list"><a href="#">Taiwan, Province of China</a></li>
      <li class="ac-list"><a href="#">Tajikistan</a></li>
      <li class="ac-list"><a href="#">Tanzania, United Republic of</a></li>
      <li class="ac-list"><a href="#">Thailand</a></li>
      <li class="ac-list"><a href="#">Timor-Leste</a></li>
      <li class="ac-list"><a href="#">Togo</a></li>
      <li class="ac-list"><a href="#">Tokelau</a></li>
      <li class="ac-list"><a href="#">Tonga</a></li>
      <li class="ac-list"><a href="#">Trinidad and Tobago</a></li>
      <li class="ac-list"><a href="#">Tunisia</a></li>
      <li class="ac-list"><a href="#">Turkey</a></li>
      <li class="ac-list"><a href="#">Turkmenistan</a></li>
      <li class="ac-list"><a href="#">Turks and Caicos Islands</a></li>
      <li class="ac-list"><a href="#">Tuvalu</a></li>
      <li class="ac-list"><a href="#">Uganda</a></li>
      <li class="ac-list"><a href="#">Ukraine</a></li>
      <li class="ac-list"><a href="#">United Arab Emirates</a></li>
      <li class="ac-list"><a href="#">United Kingdom</a></li>
      <li class="ac-list"><a href="#">United States</a></li>
      <li class="ac-list"><a href="#">Uruguay</a></li>
      <li class="ac-list"><a href="#">Uzbekistan</a></li>
      <li class="ac-list"><a href="#">Vanuatu</a></li>
      <li class="ac-list"><a href="#">Venezuela</a></li>
      <li class="ac-list"><a href="#">Viet Nam</a></li>
      <li class="ac-list"><a href="#">Virgin Islands, British</a></li>
      <li class="ac-list"><a href="#">Virgin Islands, U.S.</a></li>
      <li class="ac-list"><a href="#">Wallis and Futuna</a></li>
      <li class="ac-list"><a href="#">Western Sahara</a></li>
      <li class="ac-list"><a href="#">Yemen</a></li>
      <li class="ac-list"><a href="#">Zambia</a></li>
      <li class="ac-list"><a href="#">Zimbabwe</a></li>
    </ul>
  </div>
</form>