如何创建NASDAQ API的fetch请求实现股票搜索结果列表展示

首先你需要先准备好基础页面DOM结构，示例如下：

<input type="text" id="searchBar" placeholder="输入股票关键词">
<button id="submit">搜索</button>
<ul id="resultList"></ul>

你已有的基础代码可以调整为完整可用版本，逻辑是监听点击/回车事件，拿到用户输入的关键词后调用接口，取前10条结果渲染到列表：

// 获取DOM节点
const searchBar = document.getElementById("searchBar");
const searchButton = document.getElementById("submit");
const resultList = document.getElementById("resultList");
// 替换为你实际使用的NASDAQ搜索API地址
const NASDAQ_API_URL = "你的NASDAQ搜索接口地址";

// 发起搜索请求并渲染结果的方法
async function getStockList(keyword) {
  // 清空上一次的搜索结果
  resultList.innerHTML = "";
  // 空关键词不发起请求
  if(!keyword) return;
  try {
    // 拼接请求地址，对关键词做编码避免特殊字符报错
    const res = await fetch(`${NASDAQ_API_URL}?query=${encodeURIComponent(keyword)}`);
    const resData = await res.json();
    // 取前10条结果渲染
    resData.slice(0,10).forEach(stockItem => {
      const listItem = document.createElement("li");
      // 按要求显示公司名称+股票代码
      listItem.innerText = `${stockItem.companyName} - ${stockItem.symbol}`;
      resultList.appendChild(listItem);
    })
  } catch (error) {
    const errItem = document.createElement("li");
    errItem.innerText = "搜索失败，请检查输入后重试";
    resultList.appendChild(errItem);
    console.log("接口请求错误：", error);
  }
}

// 点击搜索按钮触发请求
searchButton.addEventListener("click", () => {
  getStockList(searchBar.value.trim());
})

// 回车触发请求
searchBar.addEventListener("keyup", (e) => {
  if(e.key === "Enter") {
    getStockList(searchBar.value.trim());
  }
})

注意事项：

• 代码里的NASDAQ_API_URL要替换为你实际使用的NASDAQ搜索接口地址，请求参数名（示例里是query）要和接口要求的参数名保持一致。
• 渲染列表时用到的companyName和symbol是接口返回的字段名，如果你用的接口返回字段名不同，对应替换成实际字段名即可。
• 已经默认限制只展示前10条返回结果，符合你的需求。

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