如何实现datalist自动完成下拉项仅显示名称，点击跳转至页面锚点且不展示完整URL

我完全理解你的需求——你希望datalist的下拉选项只显示国家名称，点击后能跳转到对应的页面锚点，同时选中后输入框里依然显示国家名称，而不是跳转的URL。你的当前代码里的问题主要是option的value属性和显示文本的混用，还有重复的选项导致了下拉列表出现异常显示，下面给你两种简单可行的解决方案：

方案一：使用名称-URL映射对象（推荐，适合大量数据） #

这种方法把国家名称和对应的跳转地址分开管理，代码更清晰，后期维护900条数据也更方便：

修正后的完整代码 #

<html>
  <body>
    Type the Country name and then select from the list:
    <input 
      list="europe-countries" 
      placeholder="Start typing..." 
      id="country-input"
    >
    <datalist id="europe-countries">
      <option>Germany</option>
      <option>United Kingdom</option>
      <option>Italy</option>
      <option>France</option>
      <option>Spain</option>
      <option>Ukraine</option>
      <option>Poland</option>
      <option>Romania</option>
      <option>Netherlands</option>
      <option>Belgium</option>
      <option>Czech Republic</option>
      <option>Greece</option>
      <option>Portugal</option>
      <option>Sweden</option>
      <option>Hungary</option>
      <option>Belarus</option>
      <option>Austria</option>
      <option>Serbia</option>
      <option>Switzerland</option>
      <option>Bulgaria</option>
      <option>Denmark</option>
      <option>Finland</option>
      <option>Slovakia</option>
      <option>Norway</option>
      <option>Ireland</option>
      <option>Croatia</option>
    </datalist>

    <br><br><br><br><br>
    <a id="section1"></a>
    <h2>Germany </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sagittis enim.

    <br><br><br><br><br><br><br><br><br>
    <a id="section2"></a>
    <h2>United Kingdom </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sagittis enim.

    <br><br><br><br><br><br><br><br><br>
    <a id="section3"></a>
    <h2>Italy </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sagittis enim.

    <script>
      // 创建国家名称到跳转URL的映射
      const countryUrlMap = {
        "Germany": "autocompletedropdown.html#section1",
        "United Kingdom": "autocompletedropdown.html#section2",
        "Italy": "autocompletedropdown.html#section3",
        "France": "autocompletedropdown.html#section4",
        "Spain": "autocompletedropdown.html#section5"
        // ... 剩下的900条数据都可以按这个格式添加
      };

      // 给输入框绑定change事件
      document.getElementById('country-input').addEventListener('change', function() {
        const selectedCountry = this.value;
        // 检查映射里是否有这个国家的URL
        if (countryUrlMap[selectedCountry]) {
          window.location.href = countryUrlMap[selectedCountry];
        }
      });
    </script>
  </body>
</html>

方案说明 #

1. 移除了option里的value属性，让每个option只显示国家名称，下拉列表不会出现任何URL
2. 用JavaScript对象countryUrlMap统一管理国家和对应锚点的映射关系，后期维护数据时只需要修改这个对象即可
3. 通过addEventListener绑定事件，获取用户选中的国家名称，从映射对象里拿到对应的URL再跳转，保证输入框始终显示国家名称

方案二：使用option的data属性（适合少量快速添加的场景） #

如果不想单独维护映射对象，可以给每个option添加自定义的data-href属性来存储跳转URL：

修正后的代码片段 #

<html>
  <body>
    Type the Country name and then select from the list:
    <input 
      list="europe-countries" 
      placeholder="Start typing..." 
      id="country-input"
    >
    <datalist id="europe-countries">
      <option data-href="autocompletedropdown.html#section1">Germany</option>
      <option data-href="autocompletedropdown.html#section2">United Kingdom</option>
      <option data-href="autocompletedropdown.html#section3">Italy</option>
      <option data-href="autocompletedropdown.html#section4">France</option>
      <!-- 其他国家继续按这个格式添加 -->
    </datalist>

    <!-- 页面锚点内容和之前一样 -->

    <script>
      document.getElementById('country-input').addEventListener('change', function() {
        const selectedCountry = this.value;
        // 找到对应的option元素
        const options = document.getElementById('europe-countries').options;
        for (let option of options) {
          if (option.textContent === selectedCountry) {
            const targetUrl = option.getAttribute('data-href');
            if (targetUrl) {
              window.location.href = targetUrl;
              break;
            }
          }
        }
      });
    </script>
  </body>
</html>

方案说明 #

1. 每个option通过data-href属性存储跳转URL，显示文本依然是国家名称，下拉列表只会显示名称
2. 事件触发时，遍历datalist的所有option，找到和用户选中名称匹配的项，取出data-href的值再跳转
3. 输入框始终显示选中的国家名称，不会出现URL

为什么你的原代码会出问题？ #

你原代码里同时存在<option>Germany</option>和<option value="autocompletedropdown.html#section1">Germany</option>，这会导致下拉列表出现两个“Germany”选项，其中第二个选项的value是URL，部分旧浏览器可能会异常显示成“URL + 名称”；另外当用户选中带value的选项时，输入框的内容会被替换成URL，这也是你不想看到的结果。

内容来源于stack exchange