我想从一个输入标签中获取用户的输入，该标签还有一个自动完成选项，可以帮助用户从国家/地区列表中进行选择，但我的问题是当我尝试使用console.log()它会显示用户键入的每个字符，但我想在他完成键入并从将显示的自动完成对话框中选择后向我显示结果。我该怎么做？
我的代码：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Insert title here</title>
</head>
<body>
<form method="post" action="createFlight">
<div>
<input name="c" list="anrede" id="country">
<datalist id="anrede"></datalist>
</div>
</form>
<script>
var countries = ["French Polynesia", "Algeria", "Denmark", "South Africa", "United Arab Emirates", "Russia", "China", "Brazil", "Yemen", "Russian Federation", "Spain", "Iran", "United States", "Ivory Coast", "Ethiopia", "Australia", "Egypt", "Saudi Arabia", "Nigeria", "United Kingdom", "Mexico", "Ghana", "Switzerland", "Turkey", "Jordan", "Colombia", "Chad", "Argentina", "Norway", "Iceland", "Uzbekistan", "Solomon Islands", "Morocco", "France", "Sweden", "Papua New Guinea", "Greenland", "India", "Paraguay", "Venezuela", "Italy", "Honduras", "Cook Islands", "Comoros", "Libya", "Japan", "New Zealand", "Canada", "Kazakhstan", "Myanmar", "Syria", "Indonesia", "Netherlands", "Madagascar", "Chile", "Belgium", "Antigua and Barbuda", "Germany", "Greece", "Malaysia", "Mozambique", "Samoa", "Peru", "Tanzania", "Romania", "Turkmenistan", "Bahamas", "St. Helena", "Eritrea", "Kenya", "Sudan", "Mauritania", "Aruba", "Vanuatu", "Anguilla", "Dominican Republic", "Philippines", "Bahrain", "Botswana", "Somalia", "Cuba", "Costa Rica", "Bermuda", "Nepal", "Serbia", "Lebanon", "Thailand", "Central African Republic", "Barbados", "Iraq", "Pakistan", "Marshall Islands", "Gambia", "Burundi", "Mali", "Congo", "Malawi", "Vietnam", "New Caledonia", "Bosnia and Herzegovina", "Panama", "Bulgaria", "Netherlands Antilles", "Burkina Faso", "Czech Republic", "Equatorial Guinea", "Slovakia", "Hungary", "Zimbabwe", "Georgia", "Cape Verde", "Croatia", "Brunei", "Mongolia", "Belize", "Poland", "Bangladesh", "Angola", "Haiti", "French Guiana", "Bolivia", "Cocos (Keeling) Islands", "Ireland", "Zambia", "Saint Vincent and the Grenadines", "South Korea", "Guinea", "Sri Lanka", "Benin", "Senegal", "Ecuador", "Portugal", "Ukraine", "Kiribati", "Cayman Islands", "Taiwan", "Dominica", "Tunisia", "Cameroon", "Qatar", "Tajikistan", "Mayotte", "Uganda", "Cyprus", "British Virgin Islands", "null", "Finland", "Namibia", "Israel", "Tonga", "Armenia", "Faroe Islands", "Martinique", "Democratic Republic of Congo", "Sierra Leone", "North Korea", "Guatemala", "Kyrgyzstan", "Saint Pierre and Miquelon", "Tuvalu", "Wallis and Futuna Islands", "Maldives", "Gabon", "Guadeloupe", "Turks And Caicos Islands", "Guyana", "Gibraltar", "Grenada", "Austria", "Azerbaijan", "Afghanistan", "Hong Kong", "Lao People's Democratic Republic", "Fiji", "Nauru", "Niue", "Djibouti", "Estonia", "Rwanda", "Oman", "Jamaica", "Moldova", "Federated States of Micronesia", "Lithuania", "Kuwait", "Togo", "Slovenia", "Laos", "Latvia", "Luxembourg", "Monaco", "Macau", "Nicaragua", "Belarus", "Malta", "Liberia", "Falkland Islands", "Mauritius", "Lesotho", "Swaziland", "Uruguay", "Saint Kitts and Nevis", "Niger", "Norfolk Island", "Cote D'Ivoire", "Macedonia", "Guinea-Bissau", "Cambodia", "Bhutan", "Suriname", "Trinidad and Tobago", "Seychelles", "Palau", "Reunion", "El Salvador", "Singapore", "St. Lucia", "Montenegro", "Albania", "Libyan Arab Jamahiriya", "Northern Mariana Islands", "Sao Tome and Principe", "Antarctica", "Western Sahara", "Christmas Island", "Macao"];
var options = '';
for(var i = 0; i < countries.length; i++)
options += '<option value="'+countries[i]+'" />';
document.getElementById('anrede').innerHTML = options;
var newVal;
$('#country').on("input propertychange", function(){
console.log($(this).val());
});
</script>
</body>
</html>
我认为onchange事件更好：
var countries = ["French Polynesia", "Algeria", "Denmark", "South Africa", "United Arab Emirates", "Russia", "China", "Brazil", "Yemen", "Russian Federation", "Spain", "Iran", "United States", "Ivory Coast", "Ethiopia", "Australia", "Egypt", "Saudi Arabia", "Nigeria", "United Kingdom", "Mexico", "Ghana", "Switzerland", "Turkey", "Jordan", "Colombia", "Chad", "Argentina", "Norway", "Iceland", "Uzbekistan", "Solomon Islands", "Morocco", "France", "Sweden", "Papua New Guinea", "Greenland", "India", "Paraguay", "Venezuela", "Italy", "Honduras", "Cook Islands", "Comoros", "Libya", "Japan", "New Zealand", "Canada", "Kazakhstan", "Myanmar", "Syria", "Indonesia", "Netherlands", "Madagascar", "Chile", "Belgium", "Antigua and Barbuda", "Germany", "Greece", "Malaysia", "Mozambique", "Samoa", "Peru", "Tanzania", "Romania", "Turkmenistan", "Bahamas", "St. Helena", "Eritrea", "Kenya", "Sudan", "Mauritania", "Aruba", "Vanuatu", "Anguilla", "Dominican Republic", "Philippines", "Bahrain", "Botswana", "Somalia", "Cuba", "Costa Rica", "Bermuda", "Nepal", "Serbia", "Lebanon", "Thailand", "Central African Republic", "Barbados", "Iraq", "Pakistan", "Marshall Islands", "Gambia", "Burundi", "Mali", "Congo", "Malawi", "Vietnam", "New Caledonia", "Bosnia and Herzegovina", "Panama", "Bulgaria", "Netherlands Antilles", "Burkina Faso", "Czech Republic", "Equatorial Guinea", "Slovakia", "Hungary", "Zimbabwe", "Georgia", "Cape Verde", "Croatia", "Brunei", "Mongolia", "Belize", "Poland", "Bangladesh", "Angola", "Haiti", "French Guiana", "Bolivia", "Cocos (Keeling) Islands", "Ireland", "Zambia", "Saint Vincent and the Grenadines", "South Korea", "Guinea", "Sri Lanka", "Benin", "Senegal", "Ecuador", "Portugal", "Ukraine", "Kiribati", "Cayman Islands", "Taiwan", "Dominica", "Tunisia", "Cameroon", "Qatar", "Tajikistan", "Mayotte", "Uganda", "Cyprus", "British Virgin Islands", "null", "Finland", "Namibia", "Israel", "Tonga", "Armenia", "Faroe Islands", "Martinique", "Democratic Republic of Congo", "Sierra Leone", "North Korea", "Guatemala", "Kyrgyzstan", "Saint Pierre and Miquelon", "Tuvalu", "Wallis and Futuna Islands", "Maldives", "Gabon", "Guadeloupe", "Turks And Caicos Islands", "Guyana", "Gibraltar", "Grenada", "Austria", "Azerbaijan", "Afghanistan", "Hong Kong", "Lao People's Democratic Republic", "Fiji", "Nauru", "Niue", "Djibouti", "Estonia", "Rwanda", "Oman", "Jamaica", "Moldova", "Federated States of Micronesia", "Lithuania", "Kuwait", "Togo", "Slovenia", "Laos", "Latvia", "Luxembourg", "Monaco", "Macau", "Nicaragua", "Belarus", "Malta", "Liberia", "Falkland Islands", "Mauritius", "Lesotho", "Swaziland", "Uruguay", "Saint Kitts and Nevis", "Niger", "Norfolk Island", "Cote D'Ivoire", "Macedonia", "Guinea-Bissau", "Cambodia", "Bhutan", "Suriname", "Trinidad and Tobago", "Seychelles", "Palau", "Reunion", "El Salvador", "Singapore", "St. Lucia", "Montenegro", "Albania", "Libyan Arab Jamahiriya", "Northern Mariana Islands", "Sao Tome and Principe", "Antarctica", "Western Sahara", "Christmas Island", "Macao"];
var options = '';
for(var i = 0; i < countries.length; i++){
options += '<option value="'+countries[i]+'" />';
}
document.getElementById('anrede').innerHTML = options;
var newVal;
$("#country").on("change", function(){
console.log($(this).val());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="c" list="anrede" id="country">
<datalist id="anrede"></datalist>此解决方案适用于以下逻辑：如果有一个键控事件后跟没有键下事件，则用户已停止键入。因此，对于每个 keyup 事件，都有 5 秒的等待时间。如果没有顺序键关闭事件，则我们假定用户已停止键入。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Insert title here</title>
</head>
<body>
<form method="post" action="createFlight">
<div>
<input name="c" list="anrede" id="country">
<datalist id="anrede"></datalist>
</div>
</form>
<script>
var countries = ["French Polynesia", "Algeria", "Denmark", "South Africa", "United Arab Emirates", "Russia", "China", "Brazil", "Yemen", "Russian Federation", "Spain", "Iran", "United States", "Ivory Coast", "Ethiopia", "Australia", "Egypt", "Saudi Arabia", "Nigeria", "United Kingdom", "Mexico", "Ghana", "Switzerland", "Turkey", "Jordan", "Colombia", "Chad", "Argentina", "Norway", "Iceland", "Uzbekistan", "Solomon Islands", "Morocco", "France", "Sweden", "Papua New Guinea", "Greenland", "India", "Paraguay", "Venezuela", "Italy", "Honduras", "Cook Islands", "Comoros", "Libya", "Japan", "New Zealand", "Canada", "Kazakhstan", "Myanmar", "Syria", "Indonesia", "Netherlands", "Madagascar", "Chile", "Belgium", "Antigua and Barbuda", "Germany", "Greece", "Malaysia", "Mozambique", "Samoa", "Peru", "Tanzania", "Romania", "Turkmenistan", "Bahamas", "St. Helena", "Eritrea", "Kenya", "Sudan", "Mauritania", "Aruba", "Vanuatu", "Anguilla", "Dominican Republic", "Philippines", "Bahrain", "Botswana", "Somalia", "Cuba", "Costa Rica", "Bermuda", "Nepal", "Serbia", "Lebanon", "Thailand", "Central African Republic", "Barbados", "Iraq", "Pakistan", "Marshall Islands", "Gambia", "Burundi", "Mali", "Congo", "Malawi", "Vietnam", "New Caledonia", "Bosnia and Herzegovina", "Panama", "Bulgaria", "Netherlands Antilles", "Burkina Faso", "Czech Republic", "Equatorial Guinea", "Slovakia", "Hungary", "Zimbabwe", "Georgia", "Cape Verde", "Croatia", "Brunei", "Mongolia", "Belize", "Poland", "Bangladesh", "Angola", "Haiti", "French Guiana", "Bolivia", "Cocos (Keeling) Islands", "Ireland", "Zambia", "Saint Vincent and the Grenadines", "South Korea", "Guinea", "Sri Lanka", "Benin", "Senegal", "Ecuador", "Portugal", "Ukraine", "Kiribati", "Cayman Islands", "Taiwan", "Dominica", "Tunisia", "Cameroon", "Qatar", "Tajikistan", "Mayotte", "Uganda", "Cyprus", "British Virgin Islands", "null", "Finland", "Namibia", "Israel", "Tonga", "Armenia", "Faroe Islands", "Martinique", "Democratic Republic of Congo", "Sierra Leone", "North Korea", "Guatemala", "Kyrgyzstan", "Saint Pierre and Miquelon", "Tuvalu", "Wallis and Futuna Islands", "Maldives", "Gabon", "Guadeloupe", "Turks And Caicos Islands", "Guyana", "Gibraltar", "Grenada", "Austria", "Azerbaijan", "Afghanistan", "Hong Kong", "Lao People's Democratic Republic", "Fiji", "Nauru", "Niue", "Djibouti", "Estonia", "Rwanda", "Oman", "Jamaica", "Moldova", "Federated States of Micronesia", "Lithuania", "Kuwait", "Togo", "Slovenia", "Laos", "Latvia", "Luxembourg", "Monaco", "Macau", "Nicaragua", "Belarus", "Malta", "Liberia", "Falkland Islands", "Mauritius", "Lesotho", "Swaziland", "Uruguay", "Saint Kitts and Nevis", "Niger", "Norfolk Island", "Cote D'Ivoire", "Macedonia", "Guinea-Bissau", "Cambodia", "Bhutan", "Suriname", "Trinidad and Tobago", "Seychelles", "Palau", "Reunion", "El Salvador", "Singapore", "St. Lucia", "Montenegro", "Albania", "Libyan Arab Jamahiriya", "Northern Mariana Islands", "Sao Tome and Principe", "Antarctica", "Western Sahara", "Christmas Island", "Macao"];
var options = '';
for(var i = 0; i < countries.length; i++)
options += '<option value="'+countries[i]+'" />';
document.getElementById('anrede').innerHTML = options;
var newVal;
var checkIfTypingIsFinished;//timer that checks if typing is finished
$('#country').keyup(function(){//if typing is paused
checkIfTypingIsFinished = setTimeout(doneTyping, 5000/*5 seconds*/);
});
$('#country').keydown(function(){//if typing is resumed
clearTimeout(checkIfTypingIsFinished);
});
function doneTyping ()//if user has finished typing, display the text
{
console.log($('#country').val());
clearTimeout(checkIfTypingIsFinished);
}
</script>
</body>
</html>
希望对您有所帮助。