如何选择自动补全文本框选项时无需点击提交即可跳转？

没问题！要实现选择补全选项后直接跳转页面，咱们只需要调整两处核心逻辑——点击补全项时的操作，以及用方向键+回车选中时的操作，同时新增一个国家和跳转URL的映射关系就行。

核心修改步骤 #

• 1. 新增国家与跳转URL的映射
  首先定义每个国家对应的目标页面地址，你可以根据实际需求替换成相对路径或绝对URL：

  const countryUrls = {
    "Afghanistan": "/afghanistan",
    "Albania": "/albania",
    "Algeria": "/algeria",
    "Andorra": "/andorra",
    "Angola": "/angola",
    // 剩余国家的URL请自行补充...
    "Bermuda": "/bermuda"
  };
  

• 2. 修改点击补全选项的跳转逻辑
  找到原代码中补全项的点击事件，把填充输入框的逻辑替换为页面跳转：

  // 原点击事件代码
  // b.addEventListener("click", function(e) {
  //   inp.value = this.getElementsByTagName("input")[0].value;
  //   closeAllLists();
  // });
  
  // 修改后的点击事件
  b.addEventListener("click", function(e) {
    const selectedCountry = this.getElementsByTagName("input")[0].value;
    const targetUrl = countryUrls[selectedCountry];
    // 检查是否有对应的URL，有则跳转
    if (targetUrl) {
      window.location.href = targetUrl;
    }
    closeAllLists();
  });
  

• 3. 优化回车选中的跳转逻辑
  原代码中回车会触发补全项的点击事件，所以如果已经修改了点击逻辑，回车自动会跳转。如果想更直接地处理，也可以修改键盘事件中的回车逻辑：

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
      addActive(x);
    } else if (e.keyCode == 38) {
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1 && x) {
        const selectedCountry = x[currentFocus].getElementsByTagName("input")[0].value;
        const targetUrl = countryUrls[selectedCountry];
        if (targetUrl) {
          window.location.href = targetUrl;
        }
        closeAllLists();
      }
    }
  });
  

完整修改后的代码 #

<script>
function autocomplete(inp, arr) {
  // 新增国家URL映射
  const countryUrls = {
    "Afghanistan": "/afghanistan",
    "Albania": "/albania",
    "Algeria": "/algeria",
    "Andorra": "/andorra",
    "Angola": "/angola",
    "Anguilla": "/anguilla",
    "Antigua & Barbuda": "/antigua-barbuda",
    "Argentina": "/argentina",
    "Armenia": "/armenia",
    "Aruba": "/aruba",
    "Australia": "/australia",
    "Austria": "/austria",
    "Azerbaijan": "/azerbaijan",
    "Bahamas": "/bahamas",
    "Bahrain": "/bahrain",
    "Bangladesh": "/bangladesh",
    "Barbados": "/barbados",
    "Belarus": "/belarus",
    "Belgium": "/belgium",
    "Belize": "/belize",
    "Benin": "/benin",
    "Bermuda": "/bermuda"
  };

  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].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
        b = document.createElement("DIV");
        b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
        b.innerHTML += arr[i].substr(val.length);
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        // 修改点击事件为跳转逻辑
        b.addEventListener("click", function(e) {
          const selectedCountry = this.getElementsByTagName("input")[0].value;
          const targetUrl = countryUrls[selectedCountry];
          if (targetUrl) {
            window.location.href = targetUrl;
          }
          closeAllLists();
        });
        a.appendChild(b);
      }
    }
  });

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
      addActive(x);
    } else if (e.keyCode == 38) {
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1 && x) {
        const selectedCountry = x[currentFocus].getElementsByTagName("input")[0].value;
        const targetUrl = countryUrls[selectedCountry];
        if (targetUrl) {
          window.location.href = targetUrl;
        }
        closeAllLists();
      }
    }
  });

  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"];
autocomplete(document.getElementById("myInput"), countries);
</script>

<form autocomplete="off">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

额外说明 #

• 如果你希望未配置URL的国家有默认跳转，可以在判断中添加else逻辑，比如window.location.href = "/default-country-page"。
• 提交按钮的原有跳转逻辑依然保留，如果你不需要的话，可以移除<input type="submit">或者阻止表单默认提交行为。

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