Как я могу получить ввод пользователя после того, как он закончил печатать вместо каждого набранного символа? - PullRequest
Новая
       1

Как я могу получить ввод пользователя после того, как он закончил печатать вместо каждого набранного символа?

1 голос
/ 28 января 2020

Я хочу получить пользовательский ввод из тега ввода, который также имеет опцию автозаполнения, которая поможет пользователю выбрать из списка стран, но моя проблема в том, что когда я пытаюсь использовать 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>

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Это решение работает на логике c, которую пользователь прекратил печатать, если есть событие keyup, за которым не следует событие keydown. Следовательно, для каждого события 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>

Надеюсь, это поможет.

0 голосов
/ 28 января 2020

Я думаю, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...