如何实现点击自动补全项或精准匹配后按回车触发alert

核心修改点 #

1. 抽离公共处理函数：将点击下拉选项的逻辑封装成独立函数，避免代码重复，让回车触发时能复用同一逻辑。
2. 增强回车事件判断：按下回车时，先检查输入内容是否与某个国家名称完全匹配（大小写不敏感），匹配则触发功能；若通过上下键选中了下拉项，仍保留原有的模拟点击逻辑。

修改后的完整代码 #

JavaScript 部分

function autocomplete(inp, arr) {
  var currentFocus;

  // 封装公共的选中处理逻辑
  function handleSelect(selectedValue) {
    inp.value = selectedValue;
    alert('clicked');
    closeAllLists();
  }

  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) {
      return false;
    }
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
      if ((arr[i].toUpperCase()).includes(val.toUpperCase())) {
        b = document.createElement("DIV");
        b.innerHTML += arr[i];
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        
        // 完全匹配时关闭下拉列表
        if (arr[i].toUpperCase() === val.toUpperCase()) {
          closeAllLists();
        }

        // 点击事件调用公共函数
        b.addEventListener("click", function(e) {
          var selectedValue = this.getElementsByTagName("input")[0].value;
          handleSelect(selectedValue);
        });
        a.appendChild(b);
      }
    }
  });

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    var val = this.value.trim();

    if (e.keyCode == 40) {
      currentFocus++;
      addActive(x);
    } else if (e.keyCode == 38) {
      currentFocus--;
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      // 优先处理选中下拉项的情况
      if (currentFocus > -1 && x) {
        x[currentFocus].click();
      } else {
        // 检查输入是否完全匹配某个国家（大小写不敏感）
        var matchedCountry = arr.find(country => 
          country.toUpperCase() === val.toUpperCase()
        );
        if (matchedCountry) {
          handleSelect(matchedCountry);
        }
      }
    }
  });

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }

  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

  document.addEventListener("click", function(e) {
    closeAllLists(e.target);
  });
}

var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central Arfrican Republic", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cuba", "Curacao", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauro", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre & Miquelon", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "St Kitts & Nevis", "St Lucia", "St Vincent", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States of America", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"];

autocomplete(document.getElementById("inputField"), countries);

window.onload = function() {
  document.getElementById("inputField").focus();
};

CSS 部分

.autocomplete-items {
  background-color: black;
  color: white;
  width: 27%;
}

HTML 部分

<form id="form" autocomplete="off" action="/action_page.php">
  <div class="form-group autocomplete d-inline-flex align-items-center mt-3">
    <label for="form-control" class="seasonsLabel me-3"></label>
    <input type="text" class="form-control" id="inputField" required>
  </div>
</form>

关键逻辑说明 #

• 公共函数handleSelect：统一处理选中后的赋值、alert提示和关闭下拉列表操作，确保点击和回车触发的行为完全一致。
• 回车事件判断：
  1. 若用户通过上下键选中了下拉项（currentFocus > -1），则模拟点击该选项，保持原有交互。
  2. 若没有选中下拉项，则使用Array.find()检查输入值是否与数组中某个国家名称完全匹配（大小写统一转成大写后对比），匹配则调用handleSelect触发功能。
• 输入时的完全匹配处理：保留原逻辑，当输入内容与某个国家完全匹配时自动关闭下拉列表，提升用户体验。

内容的提问来源于stack exchange，提问作者bikeyredcycle2190