搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

HTML5数据列表：轻量级自动完成控件

作者：Terry2021.02.19来源：Web前端之家浏览：5930评论:0
关键词：html5

在本教程中，我们将深入探讨很少使用的HTML5<datalist>元素。它可以实现不需要JavaScript的轻量级，可访问的，跨浏览器的自动完成表单控件。

<select>

<select>当您希望用户从一小部分选项中进行选择时，HTML5控件是理想的选择。在以下情况下，它们不太实用：

  • 有很多选择，例如国家或职位

  • 用户想要输入不在列表中的自己的选项

显而易见的解决方案是自动完成控件。这允许用户输入一些字符，这限制了可用于更快选择的选项。

<select>在您开始输入时会跳到正确的位置，但这并不总是显而易见的。它无法在所有设备（例如触摸屏）上正常工作，并且会在一两秒钟内重置。

开发人员通常会使用许多 JavaScript驱动的解决方案之一，但是自定义自动完成控件并非总是必需的。HTML5<datalist>元素是轻量级的，可访问的并且没有JavaScript依赖性。您可能听说过越野车或缺乏支持。2021年并非如此，但存在浏览器不一致和警告。

<datalist> 快速开始

从包含200多个选项的列表中选择您的国家/地区是自动完成控件的理想选择。直接在HTML页面中为每个国家/地区定义一个<datalist>带有子<option>元素的元素：

<datalist id="countrydata">
  <option>Afghanistan</option>
  <option>Åland Islands</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>
  ...etc...</datalist>

id然后可以list在任何<input>字段中的属性引用数据列表：

<label for="country">country</label><input type="text"
  list="countrydata"
  id="country" name="country"
  size="50"
  autocomplete="off" />

令人困惑的是，最好进行设置autocomplete="off"。这样可确保在用户<datalist>先前在浏览器中输入的值中显示用户的值，但不会显示该值。

结果：

1611572201datalist-country.gif

这是Microsoft Edge中的默认渲染。其他应用程序实现了类似的功能，但外观在平台和浏览器上有所不同。

<option> 选项

<option>通常将标签用作的文本子代：

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option></datalist>

使用value属性会产生相同的结果：

<datalist id="mylist">
  <option value="label one" />
  <option value="label two" />
  <option value="label three" /></datalist>

注意：/>在HTML5中，斜杠是可选的，尽管它可以帮助防止编码错误。

您还可以使用以下两种格式之一根据所选标签设置值。

选项1：

<datalist id="mylist">
  <option value="1">label one</option>
  <option value="2">label two</option>
  <option value="3">label three</option></datalist>

选项2：

<datalist id="mylist">
  <option value="1" label="label one" />
  <option value="2" label="label two" />
  <option value="3" label="label three" /></datalist>

在这两种情况下，输入字段都设置为1，2或者3选择了有效选项后，但是用户界面在不同的浏览器中会有所不同：

  • Chrome会显示一个同时包含值和标签的列表。一旦选择一个选项，则仅保留该值。

  • Firefox仅显示带有标签的列表。一旦选择一个选项，它将切换到该值。

  • 边缘仅显示值。

以下CodePen示例显示了所有变体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title>
  <style>
    body {
      font-family: sans-serif;
      font-size: 100%;
      color: #222;
      background-color: #fafafe;
      margin: 1em;
    }

    label, button {
      display: block;
      margin-top: 1em;
    }
  </style>
</head>
<body>
  <h1>Lightweight HTML5 auto-complete</h1>

  <form id="autoform">

    <label for="country1">country 1 (datalist uses <code>&lt;option&gt;value&lt;/option&gt;</code>):</label>
    <input list="countrydata1" id="country1" name="country1" size="50" autocomplete="off" />
    
    <label for="country2">country 2 (datalist uses <code>&lt;option value="value" /&gt;</code>):</label>
    <input list="countrydata2" id="country2" name="country2" size="50" autocomplete="off" />
    
    <label for="country3">country 3 (datalist uses <code>&lt;option value="value"&gt;name&lt;/option&gt;</code>):</label>
    <input list="countrydata3" id="country3" name="country3" size="50" autocomplete="off" />
    
    <label for="country4">country 4 (datalist uses <code>&lt;option value="value" label="name" /&gt;</code>):</label>
    <input list="countrydata3" id="country3" name="country3" size="50" autocomplete="off" />

    <button type="submit">submit</button>

  </form>

<datalist id="countrydata1">
  <option>Afghanistan</option>
  <option>Åland Islands</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>
  <option>Antigua and Barbuda</option>
  <option>Argentina</option>
  <option>Armenia</option>
  <option>Aruba</option>
  <option>Australia</option>
  <option>Austria</option>
  <option>Azerbaijan</option>
  <option>Bahamas</option>
  <option>Bahrain</option>
  <option>Bangladesh</option>
  <option>Barbados</option>
  <option>Belarus</option>
  <option>Belgium</option>
  <option>Belize</option>
  <option>Benin</option>
  <option>Bermuda</option>
  <option>Bhutan</option>
  <option>Bolivia (Plurinational State of)</option>
  <option>Bonaire, Sint Eustatius and Saba</option>
  <option>Bosnia and Herzegovina</option>
  <option>Botswana</option>
  <option>Bouvet Island</option>
  <option>Brazil</option>
  <option>British Indian Ocean Territory</option>
  <option>Brunei Darussalam</option>
  <option>Bulgaria</option>
  <option>Burkina Faso</option>
  <option>Burundi</option>
  <option>Cabo Verde</option>
  <option>Cambodia</option>
  <option>Cameroon</option>
  <option>Canada</option>
  <option>Cayman Islands</option>
  <option>Central African Republic</option>
  <option>Chad</option>
  <option>Chile</option>
  <option>China</option>
  <option>Christmas Island</option>
  <option>Cocos (Keeling) Islands</option>
  <option>Colombia</option>
  <option>Comoros</option>
  <option>Congo</option>
  <option>Congo, Democratic Republic of the</option>
  <option>Cook Islands</option>
  <option>Costa Rica</option>
  <option>Côte d'Ivoire</option>
  <option>Croatia</option>
  <option>Cuba</option>
  <option>Curaçao</option>
  <option>Cyprus</option>
  <option>Czechia</option>
  <option>Denmark</option>
  <option>Djibouti</option>
  <option>Dominica</option>
  <option>Dominican Republic</option>
  <option>Ecuador</option>
  <option>Egypt</option>
  <option>El Salvador</option>
  <option>Equatorial Guinea</option>
  <option>Eritrea</option>
  <option>Estonia</option>
  <option>Eswatini</option>
  <option>Ethiopia</option>
  <option>Falkland Islands (Malvinas)</option>
  <option>Faroe Islands</option>
  <option>Fiji</option>
  <option>Finland</option>
  <option>France</option>
  <option>French Guiana</option>
  <option>French Polynesia</option>
  <option>French Southern Territories</option>
  <option>Gabon</option>
  <option>Gambia</option>
  <option>Georgia</option>
  <option>Germany</option>
  <option>Ghana</option>
  <option>Gibraltar</option>
  <option>Greece</option>
  <option>Greenland</option>
  <option>Grenada</option>
  <option>Guadeloupe</option>
  <option>Guam</option>
  <option>Guatemala</option>
  <option>Guernsey</option>
  <option>Guinea</option>
  <option>Guinea-Bissau</option>
  <option>Guyana</option>
  <option>Haiti</option>
  <option>Heard Island and McDonald Islands</option>
  <option>Holy See</option>
  <option>Honduras</option>
  <option>Hong Kong</option>
  <option>Hungary</option>
  <option>Iceland</option>
  <option>India</option>
  <option>Indonesia</option>
  <option>Iran (Islamic Republic of)</option>
  <option>Iraq</option>
  <option>Ireland</option>
  <option>Isle of Man</option>
  <option>Israel</option>
  <option>Italy</option>
  <option>Jamaica</option>
  <option>Japan</option>
  <option>Jersey</option>
  <option>Jordan</option>
  <option>Kazakhstan</option>
  <option>Kenya</option>
  <option>Kiribati</option>
  <option>Korea (Democratic People's Republic of)</option>
  <option>Korea, Republic of</option>
  <option>Kuwait</option>
  <option>Kyrgyzstan</option>
  <option>Lao People's Democratic Republic</option>
  <option>Latvia</option>
  <option>Lebanon</option>
  <option>Lesotho</option>
  <option>Liberia</option>
  <option>Libya</option>
  <option>Liechtenstein</option>
  <option>Lithuania</option>
  <option>Luxembourg</option>
  <option>Macao</option>
  <option>Madagascar</option>
  <option>Malawi</option>
  <option>Malaysia</option>
  <option>Maldives</option>
  <option>Mali</option>
  <option>Malta</option>
  <option>Marshall Islands</option>
  <option>Martinique</option>
  <option>Mauritania</option>
  <option>Mauritius</option>
  <option>Mayotte</option>
  <option>Mexico</option>
  <option>Micronesia (Federated States of)</option>
  <option>Moldova, Republic of</option>
  <option>Monaco</option>
  <option>Mongolia</option>
  <option>Montenegro</option>
  <option>Montserrat</option>
  <option>Morocco</option>
  <option>Mozambique</option>
  <option>Myanmar</option>
  <option>Namibia</option>
  <option>Nauru</option>
  <option>Nepal</option>
  <option>Netherlands</option>
  <option>New Caledonia</option>
  <option>New Zealand</option>
  <option>Nicaragua</option>
  <option>Niger</option>
  <option>Nigeria</option>
  <option>Niue</option>
  <option>Norfolk Island</option>
  <option>North Macedonia</option>
  <option>Northern Mariana Islands</option>
  <option>Norway</option>
  <option>Oman</option>
  <option>Pakistan</option>
  <option>Palau</option>
  <option>Palestine, State of</option>
  <option>Panama</option>
  <option>Papua New Guinea</option>
  <option>Paraguay</option>
  <option>Peru</option>
  <option>Philippines</option>
  <option>Pitcairn</option>
  <option>Poland</option>
  <option>Portugal</option>
  <option>Puerto Rico</option>
  <option>Qatar</option>
  <option>Réunion</option>
  <option>Romania</option>
  <option>Russian Federation</option>
  <option>Rwanda</option>
  <option>Saint Barthélemy</option>
  <option>Saint Helena, Ascension and Tristan da Cunha</option>
  <option>Saint Kitts and Nevis</option>
  <option>Saint Lucia</option>
  <option>Saint Martin (French part)</option>
  <option>Saint Pierre and Miquelon</option>
  <option>Saint Vincent and the Grenadines</option>
  <option>Samoa</option>
  <option>San Marino</option>
  <option>Sao Tome and Principe</option>
  <option>Saudi Arabia</option>
  <option>Senegal</option>
  <option>Serbia</option>
  <option>Seychelles</option>
  <option>Sierra Leone</option>
  <option>Singapore</option>
  <option>Sint Maarten (Dutch part)</option>
  <option>Slovakia</option>
  <option>Slovenia</option>
  <option>Solomon Islands</option>
  <option>Somalia</option>
  <option>South Africa</option>
  <option>South Georgia and the South Sandwich Islands</option>
  <option>South Sudan</option>
  <option>Spain</option>
  <option>Sri Lanka</option>
  <option>Sudan</option>
  <option>Suriname</option>
  <option>Svalbard and Jan Mayen</option>
  <option>Sweden</option>
  <option>Switzerland</option>
  <option>Syrian Arab Republic</option>
  <option>Taiwan, Province of China</option>
  <option>Tajikistan</option>
  <option>Tanzania, United Republic of</option>
  <option>Thailand</option>
  <option>Timor-Leste</option>
  <option>Togo</option>
  <option>Tokelau</option>
  <option>Tonga</option>
  <option>Trinidad and Tobago</option>
  <option>Tunisia</option>
  <option>Turkey</option>
  <option>Turkmenistan</option>
  <option>Turks and Caicos Islands</option>
  <option>Tuvalu</option>
  <option>Uganda</option>
  <option>Ukraine</option>
  <option>United Arab Emirates</option>
  <option>United Kingdom of Great Britain and Northern Ireland</option>
  <option>United States Minor Outlying Islands</option>
  <option>United States of America</option>
  <option>Uruguay</option>
  <option>Uzbekistan</option>
  <option>Vanuatu</option>
  <option>Venezuela (Bolivarian Republic of)</option>
  <option>Viet Nam</option>
  <option>Virgin Islands (British)</option>
  <option>Virgin Islands (U.S.)</option>
  <option>Wallis and Futuna</option>
  <option>Western Sahara</option>
  <option>Yemen</option>
  <option>Zambia</option>
  <option>Zimbabwe</option>
</datalist>

<datalist id="countrydata2">
  <option value="Afghanistan" />
  <option value="Åland Islands" />
  <option value="Albania" />
  <option value="Algeria" />
  <option value="American Samoa" />
  <option value="Andorra" />
  <option value="Angola" />
  <option value="Anguilla" />
  <option value="Antarctica" />
  <option value="Antigua and Barbuda" />
  <option value="Argentina" />
  <option value="Armenia" />
  <option value="Aruba" />
  <option value="Australia" />
  <option value="Austria" />
  <option value="Azerbaijan" />
  <option value="Bahamas" />
  <option value="Bahrain" />
  <option value="Bangladesh" />
  <option value="Barbados" />
  <option value="Belarus" />
  <option value="Belgium" />
  <option value="Belize" />
  <option value="Benin" />
  <option value="Bermuda" />
  <option value="Bhutan" />
  <option value="Bolivia (Plurinational State of)" />
  <option value="Bonaire, Sint Eustatius and Saba" />
  <option value="Bosnia and Herzegovina" />
  <option value="Botswana" />
  <option value="Bouvet Island" />
  <option value="Brazil" />
  <option value="British Indian Ocean Territory" />
  <option value="Brunei Darussalam" />
  <option value="Bulgaria" />
  <option value="Burkina Faso" />
  <option value="Burundi" />
  <option value="Cabo Verde" />
  <option value="Cambodia" />
  <option value="Cameroon" />
  <option value="Canada" />
  <option value="Cayman Islands" />
  <option value="Central African Republic" />
  <option value="Chad" />
  <option value="Chile" />
  <option value="China" />
  <option value="Christmas Island" />
  <option value="Cocos (Keeling) Islands" />
  <option value="Colombia" />
  <option value="Comoros" />
  <option value="Congo" />
  <option value="Congo, Democratic Republic of the" />
  <option value="Cook Islands" />
  <option value="Costa Rica" />
  <option value="Côte d'Ivoire" />
  <option value="Croatia" />
  <option value="Cuba" />
  <option value="Curaçao" />
  <option value="Cyprus" />
  <option value="Czechia" />
  <option value="Denmark" />
  <option value="Djibouti" />
  <option value="Dominica" />
  <option value="Dominican Republic" />
  <option value="Ecuador" />
  <option value="Egypt" />
  <option value="El Salvador" />
  <option value="Equatorial Guinea" />
  <option value="Eritrea" />
  <option value="Estonia" />
  <option value="Eswatini" />
  <option value="Ethiopia" />
  <option value="Falkland Islands (Malvinas)" />
  <option value="Faroe Islands" />
  <option value="Fiji" />
  <option value="Finland" />
  <option value="France" />
  <option value="French Guiana" />
  <option value="French Polynesia" />
  <option value="French Southern Territories" />
  <option value="Gabon" />
  <option value="Gambia" />
  <option value="Georgia" />
  <option value="Germany" />
  <option value="Ghana" />
  <option value="Gibraltar" />
  <option value="Greece" />
  <option value="Greenland" />
  <option value="Grenada" />
  <option value="Guadeloupe" />
  <option value="Guam" />
  <option value="Guatemala" />
  <option value="Guernsey" />
  <option value="Guinea" />
  <option value="Guinea-Bissau" />
  <option value="Guyana" />
  <option value="Haiti" />
  <option value="Heard Island and McDonald Islands" />
  <option value="Holy See" />
  <option value="Honduras" />
  <option value="Hong Kong" />
  <option value="Hungary" />
  <option value="Iceland" />
  <option value="India" />
  <option value="Indonesia" />
  <option value="Iran (Islamic Republic of)" />
  <option value="Iraq" />
  <option value="Ireland" />
  <option value="Isle of Man" />
  <option value="Israel" />
  <option value="Italy" />
  <option value="Jamaica" />
  <option value="Japan" />
  <option value="Jersey" />
  <option value="Jordan" />
  <option value="Kazakhstan" />
  <option value="Kenya" />
  <option value="Kiribati" />
  <option value="Korea (Democratic People's Republic of)" />
  <option value="Korea, Republic of" />
  <option value="Kuwait" />
  <option value="Kyrgyzstan" />
  <option value="Lao People's Democratic Republic" />
  <option value="Latvia" />
  <option value="Lebanon" />
  <option value="Lesotho" />
  <option value="Liberia" />
  <option value="Libya" />
  <option value="Liechtenstein" />
  <option value="Lithuania" />
  <option value="Luxembourg" />
  <option value="Macao" />
  <option value="Madagascar" />
  <option value="Malawi" />
  <option value="Malaysia" />
  <option value="Maldives" />
  <option value="Mali" />
  <option value="Malta" />
  <option value="Marshall Islands" />
  <option value="Martinique" />
  <option value="Mauritania" />
  <option value="Mauritius" />
  <option value="Mayotte" />
  <option value="Mexico" />
  <option value="Micronesia (Federated States of)" />
  <option value="Moldova, Republic of" />
  <option value="Monaco" />
  <option value="Mongolia" />
  <option value="Montenegro" />
  <option value="Montserrat" />
  <option value="Morocco" />
  <option value="Mozambique" />
  <option value="Myanmar" />
  <option value="Namibia" />
  <option value="Nauru" />
  <option value="Nepal" />
  <option value="Netherlands" />
  <option value="New Caledonia" />
  <option value="New Zealand" />
  <option value="Nicaragua" />
  <option value="Niger" />
  <option value="Nigeria" />
  <option value="Niue" />
  <option value="Norfolk Island" />
  <option value="North Macedonia" />
  <option value="Northern Mariana Islands" />
  <option value="Norway" />
  <option value="Oman" />
  <option value="Pakistan" />
  <option value="Palau" />
  <option value="Palestine, State of" />
  <option value="Panama" />
  <option value="Papua New Guinea" />
  <option value="Paraguay" />
  <option value="Peru" />
  <option value="Philippines" />
  <option value="Pitcairn" />
  <option value="Poland" />
  <option value="Portugal" />
  <option value="Puerto Rico" />
  <option value="Qatar" />
  <option value="Réunion" />
  <option value="Romania" />
  <option value="Russian Federation" />
  <option value="Rwanda" />
  <option value="Saint Barthélemy" />
  <option value="Saint Helena, Ascension and Tristan da Cunha" />
  <option value="Saint Kitts and Nevis" />
  <option value="Saint Lucia" />
  <option value="Saint Martin (French part)" />
  <option value="Saint Pierre and Miquelon" />
  <option value="Saint Vincent and the Grenadines" />
  <option value="Samoa" />
  <option value="San Marino" />
  <option value="Sao Tome and Principe" />
  <option value="Saudi Arabia" />
  <option value="Senegal" />
  <option value="Serbia" />
  <option value="Seychelles" />
  <option value="Sierra Leone" />
  <option value="Singapore" />
  <option value="Sint Maarten (Dutch part)" />
  <option value="Slovakia" />
  <option value="Slovenia" />
  <option value="Solomon Islands" />
  <option value="Somalia" />
  <option value="South Africa" />
  <option value="South Georgia and the South Sandwich Islands" />
  <option value="South Sudan" />
  <option value="Spain" />
  <option value="Sri Lanka" />
  <option value="Sudan" />
  <option value="Suriname" />
  <option value="Svalbard and Jan Mayen" />
  <option value="Sweden" />
  <option value="Switzerland" />
  <option value="Syrian Arab Republic" />
  <option value="Taiwan, Province of China" />
  <option value="Tajikistan" />
  <option value="Tanzania, United Republic of" />
  <option value="Thailand" />
  <option value="Timor-Leste" />
  <option value="Togo" />
  <option value="Tokelau" />
  <option value="Tonga" />
  <option value="Trinidad and Tobago" />
  <option value="Tunisia" />
  <option value="Turkey" />
  <option value="Turkmenistan" />
  <option value="Turks and Caicos Islands" />
  <option value="Tuvalu" />
  <option value="Uganda" />
  <option value="Ukraine" />
  <option value="United Arab Emirates" />
  <option value="United Kingdom of Great Britain and Northern Ireland" />
  <option value="United States Minor Outlying Islands" />
  <option value="United States of America" />
  <option value="Uruguay" />
  <option value="Uzbekistan" />
  <option value="Vanuatu" />
  <option value="Venezuela (Bolivarian Republic of)" />
  <option value="Viet Nam" />
  <option value="Virgin Islands (British)" />
  <option value="Virgin Islands (U.S.)" />
  <option value="Wallis and Futuna" />
  <option value="Western Sahara" />
  <option value="Yemen" />
  <option value="Zambia" />
  <option value="Zimbabwe" />
</datalist>

<datalist id="countrydata3">
  <option value="AF">Afghanistan</option>
  <option value="AX">Åland Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
  <option value="AZ">Azerbaijan</option>
  <option value="BS">Bahamas</option>
  <option value="BH">Bahrain</option>
  <option value="BD">Bangladesh</option>
  <option value="BB">Barbados</option>
  <option value="BY">Belarus</option>
  <option value="BE">Belgium</option>
  <option value="BZ">Belize</option>
  <option value="BJ">Benin</option>
  <option value="BM">Bermuda</option>
  <option value="BT">Bhutan</option>
  <option value="BO">Bolivia (Plurinational State of)</option>
  <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
  <option value="BA">Bosnia and Herzegovina</option>
  <option value="BW">Botswana</option>
  <option value="BV">Bouvet Island</option>
  <option value="BR">Brazil</option>
  <option value="IO">British Indian Ocean Territory</option>
  <option value="BN">Brunei Darussalam</option>
  <option value="BG">Bulgaria</option>
  <option value="BF">Burkina Faso</option>
  <option value="BI">Burundi</option>
  <option value="CV">Cabo Verde</option>
  <option value="KH">Cambodia</option>
  <option value="CM">Cameroon</option>
  <option value="CA">Canada</option>
  <option value="KY">Cayman Islands</option>
  <option value="CF">Central African Republic</option>
  <option value="TD">Chad</option>
  <option value="CL">Chile</option>
  <option value="CN">China</option>
  <option value="CX">Christmas Island</option>
  <option value="CC">Cocos (Keeling) Islands</option>
  <option value="CO">Colombia</option>
  <option value="KM">Comoros</option>
  <option value="CG">Congo</option>
  <option value="CD">Congo, Democratic Republic of the</option>
  <option value="CK">Cook Islands</option>
  <option value="CR">Costa Rica</option>
  <option value="CI">Côte d'Ivoire</option>
  <option value="HR">Croatia</option>
  <option value="CU">Cuba</option>
  <option value="CW">Curaçao</option>
  <option value="CY">Cyprus</option>
  <option value="CZ">Czechia</option>
  <option value="DK">Denmark</option>
  <option value="DJ">Djibouti</option>
  <option value="DM">Dominica</option>
  <option value="DO">Dominican Republic</option>
  <option value="EC">Ecuador</option>
  <option value="EG">Egypt</option>
  <option value="SV">El Salvador</option>
  <option value="GQ">Equatorial Guinea</option>
  <option value="ER">Eritrea</option>
  <option value="EE">Estonia</option>
  <option value="SZ">Eswatini</option>
  <option value="ET">Ethiopia</option>
  <option value="FK">Falkland Islands (Malvinas)</option>
  <option value="FO">Faroe Islands</option>
  <option value="FJ">Fiji</option>
  <option value="FI">Finland</option>
  <option value="FR">France</option>
  <option value="GF">French Guiana</option>
  <option value="PF">French Polynesia</option>
  <option value="TF">French Southern Territories</option>
  <option value="GA">Gabon</option>
  <option value="GM">Gambia</option>
  <option value="GE">Georgia</option>
  <option value="DE">Germany</option>
  <option value="GH">Ghana</option>
  <option value="GI">Gibraltar</option>
  <option value="GR">Greece</option>
  <option value="GL">Greenland</option>
  <option value="GD">Grenada</option>
  <option value="GP">Guadeloupe</option>
  <option value="GU">Guam</option>
  <option value="GT">Guatemala</option>
  <option value="GG">Guernsey</option>
  <option value="GN">Guinea</option>
  <option value="GW">Guinea-Bissau</option>
  <option value="GY">Guyana</option>
  <option value="HT">Haiti</option>
  <option value="HM">Heard Island and McDonald Islands</option>
  <option value="VA">Holy See</option>
  <option value="HN">Honduras</option>
  <option value="HK">Hong Kong</option>
  <option value="HU">Hungary</option>
  <option value="IS">Iceland</option>
  <option value="IN">India</option>
  <option value="ID">Indonesia</option>
  <option value="IR">Iran (Islamic Republic of)</option>
  <option value="IQ">Iraq</option>
  <option value="IE">Ireland</option>
  <option value="IM">Isle of Man</option>
  <option value="IL">Israel</option>
  <option value="IT">Italy</option>
  <option value="JM">Jamaica</option>
  <option value="JP">Japan</option>
  <option value="JE">Jersey</option>
  <option value="JO">Jordan</option>
  <option value="KZ">Kazakhstan</option>
  <option value="KE">Kenya</option>
  <option value="KI">Kiribati</option>
  <option value="KP">Korea (Democratic People's Republic of)</option>
  <option value="KR">Korea, Republic of</option>
  <option value="KW">Kuwait</option>
  <option value="KG">Kyrgyzstan</option>
  <option value="LA">Lao People's Democratic Republic</option>
  <option value="LV">Latvia</option>
  <option value="LB">Lebanon</option>
  <option value="LS">Lesotho</option>
  <option value="LR">Liberia</option>
  <option value="LY">Libya</option>
  <option value="LI">Liechtenstein</option>
  <option value="LT">Lithuania</option>
  <option value="LU">Luxembourg</option>
  <option value="MO">Macao</option>
  <option value="MG">Madagascar</option>
  <option value="MW">Malawi</option>
  <option value="MY">Malaysia</option>
  <option value="MV">Maldives</option>
  <option value="ML">Mali</option>
  <option value="MT">Malta</option>
  <option value="MH">Marshall Islands</option>
  <option value="MQ">Martinique</option>
  <option value="MR">Mauritania</option>
  <option value="MU">Mauritius</option>
  <option value="YT">Mayotte</option>
  <option value="MX">Mexico</option>
  <option value="FM">Micronesia (Federated States of)</option>
  <option value="MD">Moldova, Republic of</option>
  <option value="MC">Monaco</option>
  <option value="MN">Mongolia</option>
  <option value="ME">Montenegro</option>
  <option value="MS">Montserrat</option>
  <option value="MA">Morocco</option>
  <option value="MZ">Mozambique</option>
  <option value="MM">Myanmar</option>
  <option value="NA">Namibia</option>
  <option value="NR">Nauru</option>
  <option value="NP">Nepal</option>
  <option value="NL">Netherlands</option>
  <option value="NC">New Caledonia</option>
  <option value="NZ">New Zealand</option>
  <option value="NI">Nicaragua</option>
  <option value="NE">Niger</option>
  <option value="NG">Nigeria</option>
  <option value="NU">Niue</option>
  <option value="NF">Norfolk Island</option>
  <option value="MK">North Macedonia</option>
  <option value="MP">Northern Mariana Islands</option>
  <option value="NO">Norway</option>
  <option value="OM">Oman</option>
  <option value="PK">Pakistan</option>
  <option value="PW">Palau</option>
  <option value="PS">Palestine, State of</option>
  <option value="PA">Panama</option>
  <option value="PG">Papua New Guinea</option>
  <option value="PY">Paraguay</option>
  <option value="PE">Peru</option>
  <option value="PH">Philippines</option>
  <option value="PN">Pitcairn</option>
  <option value="PL">Poland</option>
  <option value="PT">Portugal</option>
  <option value="PR">Puerto Rico</option>
  <option value="QA">Qatar</option>
  <option value="RE">Réunion</option>
  <option value="RO">Romania</option>
  <option value="RU">Russian Federation</option>
  <option value="RW">Rwanda</option>
  <option value="BL">Saint Barthélemy</option>
  <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
  <option value="KN">Saint Kitts and Nevis</option>
  <option value="LC">Saint Lucia</option>
  <option value="MF">Saint Martin (French part)</option>
  <option value="PM">Saint Pierre and Miquelon</option>
  <option value="VC">Saint Vincent and the Grenadines</option>
  <option value="WS">Samoa</option>
  <option value="SM">San Marino</option>
  <option value="ST">Sao Tome and Principe</option>
  <option value="SA">Saudi Arabia</option>
  <option value="SN">Senegal</option>
  <option value="RS">Serbia</option>
  <option value="SC">Seychelles</option>
  <option value="SL">Sierra Leone</option>
  <option value="SG">Singapore</option>
  <option value="SX">Sint Maarten (Dutch part)</option>
  <option value="SK">Slovakia</option>
  <option value="SI">Slovenia</option>
  <option value="SB">Solomon Islands</option>
  <option value="SO">Somalia</option>
  <option value="ZA">South Africa</option>
  <option value="GS">South Georgia and the South Sandwich Islands</option>
  <option value="SS">South Sudan</option>
  <option value="ES">Spain</option>
  <option value="LK">Sri Lanka</option>
  <option value="SD">Sudan</option>
  <option value="SR">Suriname</option>
  <option value="SJ">Svalbard and Jan Mayen</option>
  <option value="SE">Sweden</option>
  <option value="CH">Switzerland</option>
  <option value="SY">Syrian Arab Republic</option>
  <option value="TW">Taiwan, Province of China</option>
  <option value="TJ">Tajikistan</option>
  <option value="TZ">Tanzania, United Republic of</option>
  <option value="TH">Thailand</option>
  <option value="TL">Timor-Leste</option>
  <option value="TG">Togo</option>
  <option value="TK">Tokelau</option>
  <option value="TO">Tonga</option>
  <option value="TT">Trinidad and Tobago</option>
  <option value="TN">Tunisia</option>
  <option value="TR">Turkey</option>
  <option value="TM">Turkmenistan</option>
  <option value="TC">Turks and Caicos Islands</option>
  <option value="TV">Tuvalu</option>
  <option value="UG">Uganda</option>
  <option value="UA">Ukraine</option>
  <option value="AE">United Arab Emirates</option>
  <option value="GB">United Kingdom of Great Britain and Northern Ireland</option>
  <option value="UM">United States Minor Outlying Islands</option>
  <option value="US">United States of America</option>
  <option value="UY">Uruguay</option>
  <option value="UZ">Uzbekistan</option>
  <option value="VU">Vanuatu</option>
  <option value="VE">Venezuela (Bolivarian Republic of)</option>
  <option value="VN">Viet Nam</option>
  <option value="VG">Virgin Islands (British)</option>
  <option value="VI">Virgin Islands (U.S.)</option>
  <option value="WF">Wallis and Futuna</option>
  <option value="EH">Western Sahara</option>
  <option value="YE">Yemen</option>
  <option value="ZM">Zambia</option>
  <option value="ZW">Zimbabwe</option>
</datalist>

<datalist id="countrydata4">
  <option value="AF" label="Afghanistan" />
  <option value="AX" label="Åland Islands" />
  <option value="AL" label="Albania" />
  <option value="DZ" label="Algeria" />
  <option value="AS" label="American Samoa" />
  <option value="AD" label="Andorra" />
  <option value="AO" label="Angola" />
  <option value="AI" label="Anguilla" />
  <option value="AQ" label="Antarctica" />
  <option value="AG" label="Antigua and Barbuda" />
  <option value="AR" label="Argentina" />
  <option value="AM" label="Armenia" />
  <option value="AW" label="Aruba" />
  <option value="AU" label="Australia" />
  <option value="AT" label="Austria" />
  <option value="AZ" label="Azerbaijan" />
  <option value="BS" label="Bahamas" />
  <option value="BH" label="Bahrain" />
  <option value="BD" label="Bangladesh" />
  <option value="BB" label="Barbados" />
  <option value="BY" label="Belarus" />
  <option value="BE" label="Belgium" />
  <option value="BZ" label="Belize" />
  <option value="BJ" label="Benin" />
  <option value="BM" label="Bermuda" />
  <option value="BT" label="Bhutan" />
  <option value="BO" label="Bolivia (Plurinational State of)" />
  <option value="BQ" label="Bonaire, Sint Eustatius and Saba" />
  <option value="BA" label="Bosnia and Herzegovina" />
  <option value="BW" label="Botswana" />
  <option value="BV" label="Bouvet Island" />
  <option value="BR" label="Brazil" />
  <option value="IO" label="British Indian Ocean Territory" />
  <option value="BN" label="Brunei Darussalam" />
  <option value="BG" label="Bulgaria" />
  <option value="BF" label="Burkina Faso" />
  <option value="BI" label="Burundi" />
  <option value="CV" label="Cabo Verde" />
  <option value="KH" label="Cambodia" />
  <option value="CM" label="Cameroon" />
  <option value="CA" label="Canada" />
  <option value="KY" label="Cayman Islands" />
  <option value="CF" label="Central African Republic" />
  <option value="TD" label="Chad" />
  <option value="CL" label="Chile" />
  <option value="CN" label="China" />
  <option value="CX" label="Christmas Island" />
  <option value="CC" label="Cocos (Keeling) Islands" />
  <option value="CO" label="Colombia" />
  <option value="KM" label="Comoros" />
  <option value="CG" label="Congo" />
  <option value="CD" label="Congo, Democratic Republic of the" />
  <option value="CK" label="Cook Islands" />
  <option value="CR" label="Costa Rica" />
  <option value="CI" label="Côte d'Ivoire" />
  <option value="HR" label="Croatia" />
  <option value="CU" label="Cuba" />
  <option value="CW" label="Curaçao" />
  <option value="CY" label="Cyprus" />
  <option value="CZ" label="Czechia" />
  <option value="DK" label="Denmark" />
  <option value="DJ" label="Djibouti" />
  <option value="DM" label="Dominica" />
  <option value="DO" label="Dominican Republic" />
  <option value="EC" label="Ecuador" />
  <option value="EG" label="Egypt" />
  <option value="SV" label="El Salvador" />
  <option value="GQ" label="Equatorial Guinea" />
  <option value="ER" label="Eritrea" />
  <option value="EE" label="Estonia" />
  <option value="SZ" label="Eswatini" />
  <option value="ET" label="Ethiopia" />
  <option value="FK" label="Falkland Islands (Malvinas)" />
  <option value="FO" label="Faroe Islands" />
  <option value="FJ" label="Fiji" />
  <option value="FI" label="Finland" />
  <option value="FR" label="France" />
  <option value="GF" label="French Guiana" />
  <option value="PF" label="French Polynesia" />
  <option value="TF" label="French Southern Territories" />
  <option value="GA" label="Gabon" />
  <option value="GM" label="Gambia" />
  <option value="GE" label="Georgia" />
  <option value="DE" label="Germany" />
  <option value="GH" label="Ghana" />
  <option value="GI" label="Gibraltar" />
  <option value="GR" label="Greece" />
  <option value="GL" label="Greenland" />
  <option value="GD" label="Grenada" />
  <option value="GP" label="Guadeloupe" />
  <option value="GU" label="Guam" />
  <option value="GT" label="Guatemala" />
  <option value="GG" label="Guernsey" />
  <option value="GN" label="Guinea" />
  <option value="GW" label="Guinea-Bissau" />
  <option value="GY" label="Guyana" />
  <option value="HT" label="Haiti" />
  <option value="HM" label="Heard Island and McDonald Islands" />
  <option value="VA" label="Holy See" />
  <option value="HN" label="Honduras" />
  <option value="HK" label="Hong Kong" />
  <option value="HU" label="Hungary" />
  <option value="IS" label="Iceland" />
  <option value="IN" label="India" />
  <option value="ID" label="Indonesia" />
  <option value="IR" label="Iran (Islamic Republic of)" />
  <option value="IQ" label="Iraq" />
  <option value="IE" label="Ireland" />
  <option value="IM" label="Isle of Man" />
  <option value="IL" label="Israel" />
  <option value="IT" label="Italy" />
  <option value="JM" label="Jamaica" />
  <option value="JP" label="Japan" />
  <option value="JE" label="Jersey" />
  <option value="JO" label="Jordan" />
  <option value="KZ" label="Kazakhstan" />
  <option value="KE" label="Kenya" />
  <option value="KI" label="Kiribati" />
  <option value="KP" label="Korea (Democratic People's Republic of)" />
  <option value="KR" label="Korea, Republic of" />
  <option value="KW" label="Kuwait" />
  <option value="KG" label="Kyrgyzstan" />
  <option value="LA" label="Lao People's Democratic Republic" />
  <option value="LV" label="Latvia" />
  <option value="LB" label="Lebanon" />
  <option value="LS" label="Lesotho" />
  <option value="LR" label="Liberia" />
  <option value="LY" label="Libya" />
  <option value="LI" label="Liechtenstein" />
  <option value="LT" label="Lithuania" />
  <option value="LU" label="Luxembourg" />
  <option value="MO" label="Macao" />
  <option value="MG" label="Madagascar" />
  <option value="MW" label="Malawi" />
  <option value="MY" label="Malaysia" />
  <option value="MV" label="Maldives" />
  <option value="ML" label="Mali" />
  <option value="MT" label="Malta" />
  <option value="MH" label="Marshall Islands" />
  <option value="MQ" label="Martinique" />
  <option value="MR" label="Mauritania" />
  <option value="MU" label="Mauritius" />
  <option value="YT" label="Mayotte" />
  <option value="MX" label="Mexico" />
  <option value="FM" label="Micronesia (Federated States of)" />
  <option value="MD" label="Moldova, Republic of" />
  <option value="MC" label="Monaco" />
  <option value="MN" label="Mongolia" />
  <option value="ME" label="Montenegro" />
  <option value="MS" label="Montserrat" />
  <option value="MA" label="Morocco" />
  <option value="MZ" label="Mozambique" />
  <option value="MM" label="Myanmar" />
  <option value="NA" label="Namibia" />
  <option value="NR" label="Nauru" />
  <option value="NP" label="Nepal" />
  <option value="NL" label="Netherlands" />
  <option value="NC" label="New Caledonia" />
  <option value="NZ" label="New Zealand" />
  <option value="NI" label="Nicaragua" />
  <option value="NE" label="Niger" />
  <option value="NG" label="Nigeria" />
  <option value="NU" label="Niue" />
  <option value="NF" label="Norfolk Island" />
  <option value="MK" label="North Macedonia" />
  <option value="MP" label="Northern Mariana Islands" />
  <option value="NO" label="Norway" />
  <option value="OM" label="Oman" />
  <option value="PK" label="Pakistan" />
  <option value="PW" label="Palau" />
  <option value="PS" label="Palestine, State of" />
  <option value="PA" label="Panama" />
  <option value="PG" label="Papua New Guinea" />
  <option value="PY" label="Paraguay" />
  <option value="PE" label="Peru" />
  <option value="PH" label="Philippines" />
  <option value="PN" label="Pitcairn" />
  <option value="PL" label="Poland" />
  <option value="PT" label="Portugal" />
  <option value="PR" label="Puerto Rico" />
  <option value="QA" label="Qatar" />
  <option value="RE" label="Réunion" />
  <option value="RO" label="Romania" />
  <option value="RU" label="Russian Federation" />
  <option value="RW" label="Rwanda" />
  <option value="BL" label="Saint Barthélemy" />
  <option value="SH" label="Saint Helena, Ascension and Tristan da Cunha" />
  <option value="KN" label="Saint Kitts and Nevis" />
  <option value="LC" label="Saint Lucia" />
  <option value="MF" label="Saint Martin (French part)" />
  <option value="PM" label="Saint Pierre and Miquelon" />
  <option value="VC" label="Saint Vincent and the Grenadines" />
  <option value="WS" label="Samoa" />
  <option value="SM" label="San Marino" />
  <option value="ST" label="Sao Tome and Principe" />
  <option value="SA" label="Saudi Arabia" />
  <option value="SN" label="Senegal" />
  <option value="RS" label="Serbia" />
  <option value="SC" label="Seychelles" />
  <option value="SL" label="Sierra Leone" />
  <option value="SG" label="Singapore" />
  <option value="SX" label="Sint Maarten (Dutch part)" />
  <option value="SK" label="Slovakia" />
  <option value="SI" label="Slovenia" />
  <option value="SB" label="Solomon Islands" />
  <option value="SO" label="Somalia" />
  <option value="ZA" label="South Africa" />
  <option value="GS" label="South Georgia and the South Sandwich Islands" />
  <option value="SS" label="South Sudan" />
  <option value="ES" label="Spain" />
  <option value="LK" label="Sri Lanka" />
  <option value="SD" label="Sudan" />
  <option value="SR" label="Suriname" />
  <option value="SJ" label="Svalbard and Jan Mayen" />
  <option value="SE" label="Sweden" />
  <option value="CH" label="Switzerland" />
  <option value="SY" label="Syrian Arab Republic" />
  <option value="TW" label="Taiwan, Province of China" />
  <option value="TJ" label="Tajikistan" />
  <option value="TZ" label="Tanzania, United Republic of" />
  <option value="TH" label="Thailand" />
  <option value="TL" label="Timor-Leste" />
  <option value="TG" label="Togo" />
  <option value="TK" label="Tokelau" />
  <option value="TO" label="Tonga" />
  <option value="TT" label="Trinidad and Tobago" />
  <option value="TN" label="Tunisia" />
  <option value="TR" label="Turkey" />
  <option value="TM" label="Turkmenistan" />
  <option value="TC" label="Turks and Caicos Islands" />
  <option value="TV" label="Tuvalu" />
  <option value="UG" label="Uganda" />
  <option value="UA" label="Ukraine" />
  <option value="AE" label="United Arab Emirates" />
  <option value="GB" label="United Kingdom of Great Britain and Northern Ireland" />
  <option value="UM" label="United States Minor Outlying Islands" />
  <option value="US" label="United States of America" />
  <option value="UY" label="Uruguay" />
  <option value="UZ" label="Uzbekistan" />
  <option value="VU" label="Vanuatu" />
  <option value="VE" label="Venezuela (Bolivarian Republic of)" />
  <option value="VN" label="Viet Nam" />
  <option value="VG" label="Virgin Islands (British)" />
  <option value="VI" label="Virgin Islands (U.S.)" />
  <option value="WF" label="Wallis and Futuna" />
  <option value="EH" label="Western Sahara" />
  <option value="YE" label="Yemen" />
  <option value="ZM" label="Zambia" />
  <option value="ZW" label="Zimbabwe" />
</datalist>
  
  <script>
   (() => {

  // stop form submission and output field names/values to console
  const form = document.getElementById('autoform');

  form.addEventListener('submit', e => {
    e.preventDefault();
    console.clear();
    console.log('Submit disabled. Data:');

    const data = new FormData(form);
    for (let nv of data.entries()) {
      console.log(`  ${ nv[0] }: ${ nv[1] }`);
    }

  });

  })();
  </script>
</body>
</html>

实现会不断发展，但就目前而言，我建议您不要使用值和标签，因为它可能会使用户感到困惑。

<datalist> 浏览器支持和后备

<datalist>现代浏览器以及Internet Explorer 10和11都很好地支持该元素：

有几个实现说明，但是它们不会影响大多数使用情况。可能发生的最坏情况是字段恢复为标准文本输入。

如果您绝对必须支持IE9及以下版本，则有一个后备模式，该模式<select>在<datalist>失败时将标准与文本输入结合使用。改写国家示例：

<label for="country">country</label><datalist id="countrydata">
  <select name="countryselect">
    <option></option>
    <option>Afghanistan</option>
    <option>Åland Islands</option>
    <option>Albania</option>
    <option>Algeria</option>
    <option>American Samoa</option>
    <option>Andorra</option>
    <option>Angola</option>
    <option>Anguilla</option>
    <option>Antarctica</option>
    ...etc...
  </select>
  <label for="country">or other</label></datalist><input type="text"
  id="country" name="country"
  size="50"
  list="countrydata"
  autocomplete="off" />

看下DEMO:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title>
  <style>
    body {
      font-family: sans-serif;
      font-size: 100%;
      color: #222;
      background-color: #fafafe;
      margin: 1em;
    }

    label, button {
      display: block;
      margin-top: 1em;
    }
  </style>
</head>
<body>
  <h1>Lightweight HTML5 datalist fallback</h1>

<p>Works in all browsers including IE9 and below which do not support datalist elements.</p>

<form id="autoform">

  <label for="country">country</label>
  
  <datalist id="countrydata">
    <select name="countryselect">
      <option></option>
      <option>Afghanistan</option>
      <option>Åland Islands</option>
      <option>Albania</option>
      <option>Algeria</option>
      <option>American Samoa</option>
      <option>Andorra</option>
      <option>Angola</option>
      <option>Anguilla</option>
      <option>Antarctica</option>
      <option>Antigua and Barbuda</option>
      <option>Argentina</option>
      <option>Armenia</option>
      <option>Aruba</option>
      <option>Australia</option>
      <option>Austria</option>
      <option>Azerbaijan</option>
      <option>Bahamas</option>
      <option>Bahrain</option>
      <option>Bangladesh</option>
      <option>Barbados</option>
      <option>Belarus</option>
      <option>Belgium</option>
      <option>Belize</option>
      <option>Benin</option>
      <option>Bermuda</option>
      <option>Bhutan</option>
      <option>Bolivia (Plurinational State of)</option>
      <option>Bonaire, Sint Eustatius and Saba</option>
      <option>Bosnia and Herzegovina</option>
      <option>Botswana</option>
      <option>Bouvet Island</option>
      <option>Brazil</option>
      <option>British Indian Ocean Territory</option>
      <option>Brunei Darussalam</option>
      <option>Bulgaria</option>
      <option>Burkina Faso</option>
      <option>Burundi</option>
      <option>Cabo Verde</option>
      <option>Cambodia</option>
      <option>Cameroon</option>
      <option>Canada</option>
      <option>Cayman Islands</option>
      <option>Central African Republic</option>
      <option>Chad</option>
      <option>Chile</option>
      <option>China</option>
      <option>Christmas Island</option>
      <option>Cocos (Keeling) Islands</option>
      <option>Colombia</option>
      <option>Comoros</option>
      <option>Congo</option>
      <option>Congo, Democratic Republic of the</option>
      <option>Cook Islands</option>
      <option>Costa Rica</option>
      <option>Côte d'Ivoire</option>
      <option>Croatia</option>
      <option>Cuba</option>
      <option>Curaçao</option>
      <option>Cyprus</option>
      <option>Czechia</option>
      <option>Denmark</option>
      <option>Djibouti</option>
      <option>Dominica</option>
      <option>Dominican Republic</option>
      <option>Ecuador</option>
      <option>Egypt</option>
      <option>El Salvador</option>
      <option>Equatorial Guinea</option>
      <option>Eritrea</option>
      <option>Estonia</option>
      <option>Eswatini</option>
      <option>Ethiopia</option>
      <option>Falkland Islands (Malvinas)</option>
      <option>Faroe Islands</option>
      <option>Fiji</option>
      <option>Finland</option>
      <option>France</option>
      <option>French Guiana</option>
      <option>French Polynesia</option>
      <option>French Southern Territories</option>
      <option>Gabon</option>
      <option>Gambia</option>
      <option>Georgia</option>
      <option>Germany</option>
      <option>Ghana</option>
      <option>Gibraltar</option>
      <option>Greece</option>
      <option>Greenland</option>
      <option>Grenada</option>
      <option>Guadeloupe</option>
      <option>Guam</option>
      <option>Guatemala</option>
      <option>Guernsey</option>
      <option>Guinea</option>
      <option>Guinea-Bissau</option>
      <option>Guyana</option>
      <option>Haiti</option>
      <option>Heard Island and McDonald Islands</option>
      <option>Holy See</option>
      <option>Honduras</option>
      <option>Hong Kong</option>
      <option>Hungary</option>
      <option>Iceland</option>
      <option>India</option>
      <option>Indonesia</option>
      <option>Iran (Islamic Republic of)</option>
      <option>Iraq</option>
      <option>Ireland</option>
      <option>Isle of Man</option>
      <option>Israel</option>
      <option>Italy</option>
      <option>Jamaica</option>
      <option>Japan</option>
      <option>Jersey</option>
      <option>Jordan</option>
      <option>Kazakhstan</option>
      <option>Kenya</option>
      <option>Kiribati</option>
      <option>Korea (Democratic People's Republic of)</option>
      <option>Korea, Republic of</option>
      <option>Kuwait</option>
      <option>Kyrgyzstan</option>
      <option>Lao People's Democratic Republic</option>
      <option>Latvia</option>
      <option>Lebanon</option>
      <option>Lesotho</option>
      <option>Liberia</option>
      <option>Libya</option>
      <option>Liechtenstein</option>
      <option>Lithuania</option>
      <option>Luxembourg</option>
      <option>Macao</option>
      <option>Madagascar</option>
      <option>Malawi</option>
      <option>Malaysia</option>
      <option>Maldives</option>
      <option>Mali</option>
      <option>Malta</option>
      <option>Marshall Islands</option>
      <option>Martinique</option>
      <option>Mauritania</option>
      <option>Mauritius</option>
      <option>Mayotte</option>
      <option>Mexico</option>
      <option>Micronesia (Federated States of)</option>
      <option>Moldova, Republic of</option>
      <option>Monaco</option>
      <option>Mongolia</option>
      <option>Montenegro</option>
      <option>Montserrat</option>
      <option>Morocco</option>
      <option>Mozambique</option>
      <option>Myanmar</option>
      <option>Namibia</option>
      <option>Nauru</option>
      <option>Nepal</option>
      <option>Netherlands</option>
      <option>New Caledonia</option>
      <option>New Zealand</option>
      <option>Nicaragua</option>
      <option>Niger</option>
      <option>Nigeria</option>
      <option>Niue</option>
      <option>Norfolk Island</option>
      <option>North Macedonia</option>
      <option>Northern Mariana Islands</option>
      <option>Norway</option>
      <option>Oman</option>
      <option>Pakistan</option>
      <option>Palau</option>
      <option>Palestine, State of</option>
      <option>Panama</option>
      <option>Papua New Guinea</option>
      <option>Paraguay</option>
      <option>Peru</option>
      <option>Philippines</option>
      <option>Pitcairn</option>
      <option>Poland</option>
      <option>Portugal</option>
      <option>Puerto Rico</option>
      <option>Qatar</option>
      <option>Réunion</option>
      <option>Romania</option>
      <option>Russian Federation</option>
      <option>Rwanda</option>
      <option>Saint Barthélemy</option>
      <option>Saint Helena, Ascension and Tristan da Cunha</option>
      <option>Saint Kitts and Nevis</option>
      <option>Saint Lucia</option>
      <option>Saint Martin (French part)</option>
      <option>Saint Pierre and Miquelon</option>
      <option>Saint Vincent and the Grenadines</option>
      <option>Samoa</option>
      <option>San Marino</option>
      <option>Sao Tome and Principe</option>
      <option>Saudi Arabia</option>
      <option>Senegal</option>
      <option>Serbia</option>
      <option>Seychelles</option>
      <option>Sierra Leone</option>
      <option>Singapore</option>
      <option>Sint Maarten (Dutch part)</option>
      <option>Slovakia</option>
      <option>Slovenia</option>
      <option>Solomon Islands</option>
      <option>Somalia</option>
      <option>South Africa</option>
      <option>South Georgia and the South Sandwich Islands</option>
      <option>South Sudan</option>
      <option>Spain</option>
      <option>Sri Lanka</option>
      <option>Sudan</option>
      <option>Suriname</option>
      <option>Svalbard and Jan Mayen</option>
      <option>Sweden</option>
      <option>Switzerland</option>
      <option>Syrian Arab Republic</option>
      <option>Taiwan, Province of China</option>
      <option>Tajikistan</option>
      <option>Tanzania, United Republic of</option>
      <option>Thailand</option>
      <option>Timor-Leste</option>
      <option>Togo</option>
      <option>Tokelau</option>
      <option>Tonga</option>
      <option>Trinidad and Tobago</option>
      <option>Tunisia</option>
      <option>Turkey</option>
      <option>Turkmenistan</option>
      <option>Turks and Caicos Islands</option>
      <option>Tuvalu</option>
      <option>Uganda</option>
      <option>Ukraine</option>
      <option>United Arab Emirates</option>
      <option>United Kingdom of Great Britain and Northern Ireland</option>
      <option>United States Minor Outlying Islands</option>
      <option>United States of America</option>
      <option>Uruguay</option>
      <option>Uzbekistan</option>
      <option>Vanuatu</option>
      <option>Venezuela (Bolivarian Republic of)</option>
      <option>Viet Nam</option>
      <option>Virgin Islands (British)</option>
      <option>Virgin Islands (U.S.)</option>
      <option>Wallis and Futuna</option>
      <option>Western Sahara</option>
      <option>Yemen</option>
      <option>Zambia</option>
      <option>Zimbabwe</option>
    </select>
      
    <label for="country">or other:</label>
    
  </datalist>
  
  <input list="countrydata" id="country" name="country" size="50" autocomplete="off" />
  
  <button type="submit">submit</button>

</form>
  
  <script>
   (() => {

    // stop form submission and output field names/values to console
    const form = document.getElementById('autoform');

    form.addEventListener('submit', e => {
      e.preventDefault();
      console.clear();
      console.log('Submit disabled. Data:');

      const data = new FormData(form);
      for (let nv of data.entries()) {
        console.log(`  ${ nv[0] }: ${ nv[1] }`);
      }

    });

    })();
  </script>
</body>
</html>

在现代浏览器中，<option>元素成为的一部分，<datalist>并且未显示“或其他”标签。它看起来与上面的示例相同，但是countryselect表单值将设置为空字符串。

在IE9及以下版本中，（很长）<select>和文本输入字段均处于活动状态：

1.png

这两个值都可以在旧的IE中输入。您的应用程序必须：

  • 决定哪个最有效，或者

  • 使用小的JavaScript函数在另一个更改时重置一个

使用<datalist>非文本控件

基于Chrome的浏览器还可将<datalist>值应用于：

  1. 类型为的输入"date"。用户可以从定义为YYYY-MM-DD值但以其区域设置格式显示的一系列选项中进行选择。

  2. 类型为的输入"color"。用户可以从定义为六位十六进制值（三位数值无效）的颜色选项中进行选择。

  3. 类型为的输入"range"。滑块显示刻度线，尽管这并不限制可以输入哪个值。

<datalist> CSS样式

如果您在设计<select>包装盒时遇到困难，……就很简单！

一个<input>可以作为样式正常，但一个链接<datalist>和其子<option>元素不能在CSS定义样式。列表呈现完全由平台和浏览器确定。

我希望这种情况有所改善，但目前，MDN提出了一种解决方案，该解决方案是：

  1. 覆盖默认的浏览器行为

  2. 有效地对待<datalist>a，<div>因此可以在CSS中设置样式

  3. 复制JavaScript中的所有自动完成功能

我已经对其进行了进一步的增强，并且代码可以在GitHub上找到。要使用它，请将脚本作为ES6模块加载到HTML页面中的任何位置。该jsDelivr CDN URL，可以用：

<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>

或者，npm如果您使用捆绑器，则可以将其安装：

npm install datalist-css

您的<datalist>元素必须使用<option>value</option>格式。例如：

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option></datalist>

注意：<option value="value" />不能使用，因为它会导致无法设置样式的空元素！

然后可以添加CSS来为部分或全部<datalist>和<option>元素设置样式。例如：

datalist {
  position: absolute;
  max-height: 20em;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;}datalist option {
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;}/* active option styling */datalist option:hover, datalist option:focus {
  color: #fff;
  background-color: #036;
  outline: 0 none;}

样式有效，但是值得付出努力吗？我怀疑不是……

  • 很难以合理的可访问性重新实现浏览器的标准键盘，鼠标和触摸控件。该MDN例如不支持键盘事件，而我试图在某些设备上对其进行改进，难免会出现问题。

  • 您依靠200行JavaScript来解决CSS问题。它最小化为1.5kB，但是如果您<datalist>在同一页面上需要许多长元素，则可能会导致性能问题。

  • 如果需要JavaScript，是否最好使用更漂亮，更一致，经过考验的JavaScript组件？

<datalist>当JavaScript失败时，控件会退回到标准HTML5而不设置样式，但这是次要的好处。

创建增强的Ajax <datalist>

假设您的设计师乐于接受浏览器样式上的差异，则可以<datalist>使用JavaScript增强标准功能。例如：

  1. 实现可选验证，该验证仅接受中的已知值<datalist>。

  2. <option>从Ajax调用返回的数据中设置元素以搜索API。

  3. 选择一个选项时，设置其他字段值。例如，选择“美国”会在隐藏的输入中设置“美国”。

<option>尽管有一些编码注意事项，但是代码主要需要重新定义元素：

  • 输入最少字符数后，才应发出Ajax API请求。

  • 键入事件应予以消除。也就是说，仅在用户停止键入至少半秒钟后才触发Ajax调用。

  • 查询结果应该被缓存，因此没有必要重复或解析相同的调用。

  • 应避免不必要的查询。例如，输入“ un”将返回12个国家。有没有必要做进一步的Ajax调用“单位”或“联合”，因为所有结果选项都包含在最初的12个结果。

我已经为此创建了一个标准的Web组件，并且代码可以在GitHub上找到。下面的CodePen示例允许您输入至少两个字符后选择有效的国家/地区。然后，音乐艺术家自动完成功能会返回来自该国家/地区且名称与搜索字符串匹配的艺术家：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5数据列表的轻量级自动完成控件 - Web前端之家www.jiangweishan.com</title>
  <style>
    *, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fafafe;
  margin: 1em;
}

label, button {
  display: block;
  margin-top: 1em;
}
  </style>
</head>
<body>
  <h1>HTML5 Ajax auto-complete datalist demonstration</h1>

<form id="autoform">

  <label for="country">country lookup:</label>

  <auto-complete
                 api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region"
                 resultname="name"
                 querymin="2"
                 optionmax="50"
                 valid="please select a valid country"
                 >
    <input type="text" id="country" name="country" size="50" required />
  </auto-complete>

  <label for="region">country region:</label>
  <input type="text" id="region" name="region" size="10" data-autofill="region" readonly />

  <label for="countrycode">country code:</label>
  <input type="text" id="countrycode" name="countrycode" data-autofill="alpha2Code" size="2" readonly />

  <label for="artist">music artist lookup:</label>

  <auto-complete
                 api="https://musicbrainz.org/ws/2/artist?query=artist:${artist}%20AND%20country:${countrycode}&limit=21&fmt=json"
                 resultdata="artists"
                 resultname="name"
                 querymin="1"
                 optionmax="100"
                 >
    <input type="text" id="artist" name="artist" size="50" required />
  </auto-complete>

  <label for="artisttype">artist type:</label>
  <input type="text" id="artisttype" name="artisttype" data-autofill="type" size="10" readonly />

  <button type="submit">submit</button>

</form>
  
  <script>
   (() => {

// stop form submission and output field names/values to console
const form = document.getElementById('autoform');

form.addEventListener('submit', e => {

  e.preventDefault();
  console.clear();
  console.log('Submit disabled. Data:');

  const data = new FormData(form);
  for (let nv of data.entries()) {
    console.log(`  ${ nv[0] }: ${ nv[1] }`);
  }

});

})();
  </script>
</body>
</html>

要在您自己的应用程序中使用它，请将脚本作为ES6模块加载到HTML页面中的任何位置。该jsDelivr CDN URL，可以用：

<script src="https://cdn.jsdelivr.net/npm/datalist-ajax/dist/datalist-ajax.min.js"></script>

或者，npm如果您使用捆绑器，则可以将其安装：

npm install datalist-ajax

创建一个<auto-complete>带有子元素的元素，<input>以用作数据输入字段。例如，国家/地区查询使用以下代码：

<label for="country">country lookup:</label><auto-complete
  api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region"
  resultname="name"
  querymin="2"
  optionmax="50"
  valid="please select a valid country">
  <input type="text" id="country" name="country" size="50" required /></auto-complete>

<auto-complete> 元素属性：

属性描述
apiREST API URL（必需）
resultdata在返回的API JSON中包含对象结果数组的属性的名称（如果仅返回结果，则不需要）
resultname每个结果对象中与搜索输入匹配的属性名称，用于数据列表<option>元素（必需）
querymin触发搜索之前输入的最少字符数（默认值：1）
inputdelay搜索之前在两次按键之间等待的最短时间（以毫秒为单位）（默认的反跳：300）
optionmax显示的自动完成选项的最大数量（默认值：20）
valid如果设置，则选择无效值时将显示此错误消息

其余URL必须包含至少一个${id}标识符，它是通过在设定的值取代<input>与id。在上面的示例${country}中，apiURL引用了child中的值<input>，其id值为"country"。该URL通常将使用子输入，但是可以引用页面上的任何其他字段。

所述restcountries.eu API返回单个对象或包含国家数据对象的数组。例如：

[
  {
    "name": "Cyprus",
    "alpha2Code": "CY",
    "region": "Europe"
  },
  {
    "name": "Sao Tome and Principe",
    "alpha2Code": "ST",
    "region": "Africa"
  },
  {
    "name": "Andorra",
    "alpha2Code": "AD",
    "region": "Europe"
  }]

resultdata不需要设置该属性，因为这是唯一返回的数据（没有包装对象）。该resultname属性必须设置为，"name"因为该属性用于填充数据列表<option>元素。

选择选项后，其他字段可以自动填写。以下输入接收到"alpha2Code"和"region"属性数据，因为data-autofill已经设置了属性：

<input data-autofill="alpha2Code" type="text" id="countrycode" name="countrycode" readonly /><input data-autofill="region" type="text" id="region" name="region" readonly />

datalist-ajax如何工作

如果您不想阅读230行代码并保持魔力，则可以跳过本节。

该代码首先创建一个新的<datalist>内<auto-complete>，它重视孩子<input>使用list属性。一个input事件处理程序监控<input>和调用runQuery()时已经输入的字符的最小数目，并且用户仍然不打字功能。

runQuery()根据表单中的数据构建API URL，并使用Fetch API进行Ajax调用。解析返回的JSON，然后<option>构造一个包含元素的可重用DOM片段并将其放入缓存。

datalistUpdate()调用一个函数，该函数<datalist>使用适当的缓存DOM片段更新。runQuery()如果查询已经被缓存或可以使用先前的查询，则可以进行进一步的调用以避免Ajax调用。

甲change事件处理程序还监控<input>，其中，当焦点被从场移动，且值已被修改时被触发。该函数检查该值是否与已知选项匹配，并在必要时使用约束验证API来显示valid属性中提供的错误消息。

假设已选择一个有效选项，那么更改处理程序功能将使用匹配的data-autofill属性填充所有字段。保留了对自动填充字段的引用，因此，如果随后输入了无效的选项，可以将其重置。

请注意，未使用影子DOM 。这样可以确保自动完成元素<input>（和<datalist>）可以由CSS设置样式，并在需要时由其他脚本访问。

<datalist>

HTML5<datalist>有局限性，但是如果您需要一个与框架无关的简单自动完成字段，则它是理想的选择。缺乏CSS支持是一个遗憾，但是浏览器供应商最终可能会解决这种疏忽。

本教程中显示的任何代码和示例都可以用于您自己的项目。

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/html520210219a23423.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章