datalist输入框change事件无法跳转页面，仅触发页面刷新问题求助

核心问题出在事件绑定对象和选中项的获取逻辑上，以下是具体分析和修复方案：

修复后的完整代码 #

首先确保你的HTML结构正确关联input和datalist：

<input type="text" id="search-input" list="datalist-input">
<datalist id="datalist-input"></datalist>

对应的JavaScript代码修改如下：

$(document).ready(function() {
  $.ajax({
    url: 'fetch_data.php',
    dataType: 'json',
    success: function(data) {
      var datalist = $('#datalist-input');
      $.each(data, function(key, item) {
        datalist.append('<option data-id="' + item.id + '" value="' + item.name + '">' + item.value + '</option>');
      });

      // 绑定事件到关联的input元素，而非datalist本身
      $('#search-input').on('change', function() {
        var inputValue = $(this).val();
        // 通过input的value匹配对应的option（datalist的option不会被标记为selected）
        var selectedOption = datalist.find('option[value="' + inputValue + '"]');
        if (selectedOption.length > 0) {
          var id = selectedOption.data('id');
          var targetUrl = 'target_page.php?id=' + id;
          // 使用window.location.href确保跳转生效
          window.location.href = targetUrl;
        }
      });

      // 可选：监听回车事件，覆盖用户手动输入后回车的场景
      $('#search-input').on('keypress', function(e) {
        if (e.which === 13) {
          $(this).trigger('change');
        }
      });
    }
  });
});

关键修改点 #

• 事件绑定对象错误：原代码把change事件绑定在<datalist>元素上，但只有关联的<input>才会触发change事件，datalist本身不会。
• 选中项获取逻辑错误：datalist的<option>不会被标记为selected状态，必须通过input的value去匹配option的value属性来定位对应项。
• 跳转方式优化：用window.location.href替代window.location，兼容性更好，确保跳转行为稳定触发。
• 补充回车事件监听：处理用户手动输入选项内容后按回车的场景，保证所有操作路径都能触发跳转。

额外注意事项 #

• 确保input的list属性值和datalist的id完全一致，这是两者关联的核心。
• 如果fetch_data.php返回的item.name包含特殊字符，需要用encodeURIComponent处理，避免匹配失败或URL异常：

  // 生成option时编码
  var encodedName = encodeURIComponent(item.name);
  datalist.append('<option data-id="' + item.id + '" value="' + encodedName + '">' + item.value + '</option>');
  // 匹配时同步编码input值
  var inputValue = encodeURIComponent($(this).val());
  var selectedOption = datalist.find('option[value="' + inputValue + '"]');
  

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