在本教程中，我们将深入探讨很少使用的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>先前在浏览器中输入的值中显示用户的值，但不会显示该值。
结果：
这是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><option>value</option></code>):</label>
<input list="countrydata1" id="country1" name="country1" size="50" autocomplete="off" />
<label for="country2">country 2 (datalist uses <code><option value="value" /></code>):</label>
<input list="countrydata2" id="country2" name="country2" size="50" autocomplete="off" />
<label for="country3">country 3 (datalist uses <code><option value="value">name</option></code>):</label>
<input list="countrydata3" id="country3" name="country3" size="50" autocomplete="off" />
<label for="country4">country 4 (datalist uses <code><option value="value" label="name" /></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>和文本输入字段均处于活动状态：
这两个值都可以在旧的IE中输入。您的应用程序必须：
决定哪个最有效，或者
使用小的JavaScript函数在另一个更改时重置一个
使用<datalist>非文本控件
基于Chrome的浏览器还可将<datalist>值应用于：
类型为的输入
"date"。用户可以从定义为YYYY-MM-DD值但以其区域设置格式显示的一系列选项中进行选择。类型为的输入
"color"。用户可以从定义为六位十六进制值（三位数值无效）的颜色选项中进行选择。类型为的输入
"range"。滑块显示刻度线，尽管这并不限制可以输入哪个值。
<datalist> CSS样式
如果您在设计<select>包装盒时遇到困难，……就很简单！
一个<input>可以作为样式正常，但一个链接<datalist>和其子<option>元素不能在CSS定义样式。列表呈现完全由平台和浏览器确定。
我希望这种情况有所改善，但目前，MDN提出了一种解决方案，该解决方案是：
覆盖默认的浏览器行为
有效地对待
<datalist>a，<div>因此可以在CSS中设置样式复制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增强标准功能。例如：
实现可选验证，该验证仅接受中的已知值
<datalist>。<option>从Ajax调用返回的数据中设置元素以搜索API。选择一个选项时，设置其他字段值。例如，选择“美国”会在隐藏的输入中设置“美国”。
<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> 元素属性：
| 属性 | 描述 |
|---|---|
api | REST 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支持是一个遗憾，但是浏览器供应商最终可能会解决这种疏忽。
本教程中显示的任何代码和示例都可以用于您自己的项目。
网友评论文明上网理性发言 已有0人参与
发表评论: