求助：Pokédex搜索功能报错searchQuery.value undefined及UI异常

1. 解决 "searchQuery.value undefined" 错误 #

searchQuery 是 jQuery 对象，不能直接使用原生 DOM 的 .value 属性，需改用 jQuery 的 .val() 方法读写输入值：

// 原错误代码
searchQuery.value = searchQuery.value.charAt(0).toUpperCase() + searchQuery.value.slice(1);

// 修正后
let query = searchQuery.val().charAt(0).toUpperCase() + searchQuery.val().slice(1);

2. 修复搜索图标移位与重复添加输入框问题 #

• 阻止表单默认提交行为，避免页面刷新
• 检查输入框是否已存在，防止重复创建
• 调整输入框插入位置，保持图标布局稳定

searchIcon.on("click", (e) => {
  e.preventDefault(); // 阻止表单提交刷新页面
  let bodyHeader = $(".d-flex");
  let existingInput = bodyHeader.find("input[type='search']");
  
  if (existingInput.length === 0) {
    let searchQuery = $("<input>");
    searchQuery.attr("placeholder", "Pokemon Name");
    searchQuery.attr("type", "search");
    searchQuery.attr("aria-label", "search Pokemon Name");
    searchQuery.addClass("form-control me-2"); // 使用 Bootstrap 间距类维持布局
    
    bodyHeader.prepend(searchQuery); // 插入到按钮前，避免图标移位
    searchQuery.focus();
    
    searchQuery.on("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        let query = searchQuery.val().charAt(0).toUpperCase() + searchQuery.val().slice(1);
        
        // 动态获取列表项，避免初始加载时为空的问题
        let listItemArray = $("li");
        // 匹配宝可梦名称并触发详情按钮点击
        for (let i = 0; i < listItemArray.length; i++) {
          if (listItemArray[i].text().trim() === query) {
            listItemArray[i].find("button").click();
            break; // 找到后停止循环
          }
        }
      }
    });
  } else {
    existingInput.focus(); // 已有输入框时直接聚焦
  }
});

3. 修复模态框元素重复与列表项选择问题 #

• 模态框无需重新构建，直接更新现有元素内容即可
• 动态获取列表项，避免初始加载时为空
• 修正模态框按钮的 data-bs-target 属性（原错误使用 data-bs-toggle）

修正模态框逻辑 #

function showDetails(pokemon) {
  loadDetails(pokemon).then(() => {
    // 清除之前的类型样式
    modalTitle.removeClass("text-danger text-success text-primary text-warning text-info text-secondary");
    
    let pokemonType = {
      fire: "text-danger",
      grass: "text-success",
      water: "text-primary",
      electric: "text-warning",
      flying: "text-info",
      poison: "text-secondary",
    };

    pokemon.types.forEach((type) =>
      modalTitle.addClass(pokemonType[type.type.name])
    );
    modalTitle.text(pokemon.name);

    // 格式化能力与类型文本，避免拼接错误
    let abilities = pokemon.abilities.map(ab => ab.ability.name).join(", ");
    let types = pokemon.types.map(t => t.type.name).join(", ");
    
    modalBody.html(`
      Entry: ${pokemon.id}<br>
      Height: ${pokemon.height}<br>
      Weight: ${pokemon.weight}<br>
      Types: ${types}<br>
      Abilities: ${abilities}<br>
      <img src="${pokemon.imageUrlFront}" alt="${pokemon.name} front sprite">
      <img src="${pokemon.imageUrlBack}" alt="${pokemon.name} back sprite">
    `);

    modalContainer.modal("show");
  });
}

修正列表项按钮属性 #

// 原错误代码
listButton.attr("data-bs-toggle", "#pokemonModal");

// 修正后
listButton.attr("data-bs-target", "#pokemonModal");

修正模态框关闭事件 #

// 直接绑定关闭事件，无需在模态显示时重复绑定
modalClose.on("click", () => {
  modalContainer.modal("hide");
});

额外优化建议 #

• 移除模态框关闭时自动点击列表项的逻辑（listItemArray[0].children().click()），避免意外触发
• 搜索时忽略大小写，提升用户体验：listItemArray[i].text().trim().toLowerCase() === query.toLowerCase()

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