个人中心
gpt4 book ai didi

javascript - 在用户完成输入而不是输入每个字符后，如何获取用户的输入？

转载 作者：行者123 更新时间：2023-11-28 03:12:42 25 4
gpt4 key购买 nike

我想从输入标签获取用户的输入，该标签还有一个自动完成选项，可以帮助用户从国家列表中进行选择，但我的问题是，当我尝试使用 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>

关于javascript - 在用户完成输入而不是输入每个字符后，如何获取用户的输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59954442/

25 4 0
文章推荐： c++ - KD-Tree 构建例程中的严重错误
文章推荐： jquery - 如何在 DOM 之后加载视频 HTML5 并循环播放？
文章推荐： C++ 文件在第一行后停止读取
文章推荐： javascript - 是否可以通过运行所有代码 try...catch block 来捕获所有 JS 异常？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com