小贝子编程

使用箭头键导航到图层

  • 本文关键字：导航 图层 jquery html
  • 更新时间 :
  • 英文 :


我正在尝试将一些功能(使用 JQuery)构建到自定义构建的自动完成层中。我希望用户能够向下箭头进入图层，然后再次返回到输入框(首先触发了图层)。下面的代码将向您展示您实际上可以向列表上下箭头并选择一个项目，但我有 3 个问题：

1)当您向下箭头时，即使我添加了防止默认值，窗口也会向下滚动

2)当你到达列表的末尾时，它会循环回来。它需要在最后停止

3)当您返回到列表中的第一个元素时 - 然后下一个UP操作 - 应该将您带回输入框。

// 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>

以下是实现目标的解决方法：

Q1：">当您向下箭头时，即使我添加了防止默认值，窗口也会向下滚动">

答：一个可以应用于(部分)另一个问题的长答案。这是按下箭头键时发生的逻辑行为，并且您已经附加了一个keyup侦听器，但该事件无法撤消，因为该键已被按下：

  • keyup可以捕获箭头键，但无法撤消==>不是一个选项。

  • keypress可以撤消，但无法捕获箭头键==>不是一个选项。

  • keydown可以抓住箭头键，并且可以撤消==>我们需要的，完美。

    因此，keydown是限定事件，但假设您将事件更改为keydown：

  • 假设您已聚焦textarea#searchTerm并按向下箭头开始在自动完成框中导航，事件不会触发(由于调用preventDefault)。

  • 调用preventDefault后，我们甚至无法使用箭头键开始导航。

一个解决方案是明智地思考：

  • 将keydown处理程序附加到window，该处理程序检查页面($(document.activeElement))中的当前焦点元素是form#searchForm还是其子元素之一(如自动完成项)，并且按下的键是向上/向下箭头，然后我们防止该事件，因此在滚动到自动完成列表时不会向下滚动。
  • 将一个keydown处理程序附加到form#searchForm，以查看按下的键是否不是向上/向下箭头，然后停止事件传播以防止冒泡到window从而允许我们在自动完成列表中写入和导航(请记住，我们在处理程序中调用了preventDefault可能会阻止我们写入的window)。
    • 附加到
  • textarea#searchTerm的keydown的最后一个处理程序(即使input[type="text"]似乎更适合防止换行，但至少可能出现在textarea中)具有简单而重要的任务，即在聚焦(写入)字段并按下向上箭头时，我们不允许选择自动完成列表最后一项。

添加这些处理程序时的顺序非常重要：首先是 attchform#searchForm处理程序，textarea#searchTerm的，然后是window处理程序。

Q2 ： "当你到达列表的末尾时，它会循环回来。它需要停在最后">

A ：在Navigate函数中，我们查看displayBoxIndex变量(跟踪要选择的项目)是否已到达最后一项并按下向下箭头，然后我们只需return退出该功能即可。

Q3 ： "当您返回到列表中的第一个元素时 - 然后下一个 UP 操作 - 应该将您带回输入框">

A ：同样在Navigate函数中，我们检查变量是否displayBoxIndex在第一项中并按下向上箭头，然后我们触发文本字段的focus，从自动完成项中删除selected类，displayBoxIndex变量重置为-1(确保我们在键入时按下向下箭头时从第一项开始)，最后return停止该功能。

此行displayBoxIndex += diff必须出现在上述两个条件之后，以便正确计算我们要选择的元素和要选择的下一个元素。

因此，这里有一个演示来说明，它包含大量有用的注释，可以在阅读时为您提供帮助，还有一些涵盖了我对代码所做的一些更改，而我上面没有介绍：

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>

希望我设法提供一些帮助。

聚焦

来自 MDN：每个窗口一次只有一个元素具有焦点。

因此，搜索框和任何列表元素都不能一次聚焦。但是像这样的一些自动完成插件select2为此提供解决方案。他们只是切换一个类来设置一个活动的列表元素。

此处的类active用于突出显示选定的列表元素。

导航

当搜索框具有值时，导航变得棘手。在这里，:visible和:first以及nextAll()/prevAll()有助于选择第一个可见的列表元素

搜索和突出显示

搜索将循环访问列表并切换列表的可见性。突出显示使用正则表达式替换和mark标记。

通过搜索完成工作演示 

$('#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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium