【前端】搜索引擎下拉词 API 使用

零时的轻语者

已于 2023-10-10 19:37:45 修改

阅读量678

点赞数 1

分类专栏：前端文章标签：前端搜索引擎

于 2023-10-10 10:18:42 首次发布

本文链接：https://blog.csdn.net/lsdqyz/article/details/133717679

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

各大搜索引擎下拉词 API 接口地址

百度

https://suggestion.baidu.com/su?wd=关键词

必应

https://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=关键词

360搜索

https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&word=关键词

谷歌

http://suggestqueries.google.com/complete/search?output=toolbar&hl=zh&q=关键词

分析

获取下拉词时使用 fetch 方法可能发生 CORS 错误，故采用 JSONP 的方式进行跨域请求。

代码

以必应为例：

搜索 “ 关键词 ” 可以得到如下数据：

{
    "Query": "关键词",
    "FullResults": 1,
    "Results": [
        {
            "Type": "VS",
            "Suggests": [
                {
                    "Txt": "关键词提取",
                    "Type": "MT",
                    "Sk": "LT2",
                    "HCS": 0
                },
                {
                    "Txt": "关键词吉他谱",
                    "Type": "MT",
                    "Sk": "LT3MT1",
                    "HCS": 0
                }
            ]
        },
        {
            "Type": "AS",
            "Suggests": [
                {
                    "Txt": "关键词",
                    "Type": "LT",
                    "Sk": "",
                    "HCS": 0
                },
                {
                    "Txt": "关键词歌词",
                    "Type": "LT",
                    "Sk": "LT1",
                    "HCS": 0
                },
                {
                    "Txt": "关键词英文",
                    "Type": "LT",
                    "Sk": "LT2MT1",
                    "HCS": 0
                },
                {
                    "Txt": "关键词搜索",
                    "Type": "LT",
                    "Sk": "LT3MT2",
                    "HCS": 0
                },
                {
                    "Txt": "关键词云图",
                    "Type": "LT",
                    "Sk": "LT4MT2",
                    "HCS": 0
                },
                {
                    "Txt": "关键词格式",
                    "Type": "LT",
                    "Sk": "LT5MT2",
                    "HCS": 0
                }
            ]
        }
    ]
}

对数据进行处理：

const searchText = document.querySelector(".search-text");
const searchButton = document.querySelector(".search-button");
const content = document.querySelector(".content");

searchButton.addEventListener("click", getSearchSuggestions);
// 获取下拉词
function getSearchSuggestions(event) {
  // 使用 Bing 搜索引擎下拉词 API
  const searchUrl = `https://api.bing.com/qsonhs.aspx?type=cb&cb=updateSearchSuggestions&q=${searchText.value}`;
  const script = document.createElement("script");
  script.src = searchUrl;
  document.body.append(script);
  script.remove();
}
// JSONP 回调函数 
window.updateSearchSuggestions = function (data) {
  // 搜索无结果
  if (data.AS.FullResults === 0) {
    content.innerHTML = "";
    return;
  }
  const suggestions = data.AS.Results.reduce((res, item) => {
    const arr = item.Suggests.map(val => val.Txt);
    return res.concat(arr);
  }, []);
  const suggestionItems = suggestions.map((item) => {
    const list = document.createElement("li");
    list.textContent = item;
    return list;
  });
  content.innerHTML = "";
  content.append(...suggestionItems);
}

结果

完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>API 测试</title>
  <style>
    .container {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>
      <div>
        <input class="search-text" placeholder="输入数据" />
        <button class="search-button">下拉词显示</button>
      </div>
      <div>
        <ul class="content"></ul>
      </div>
    </div>
  </div>
  <script>
    const searchText = document.querySelector(".search-text");
    const searchButton = document.querySelector(".search-button");
    const content = document.querySelector(".content");

    searchButton.addEventListener("click", getSearchSuggestions);
    // 获取下拉词
    function getSearchSuggestions(event) {
      // 使用 Bing 搜索引擎下拉词 API
      const searchUrl = `https://api.bing.com/qsonhs.aspx?type=cb&cb=updateSearchSuggestions&q=${searchText.value}`;
      const script = document.createElement("script");
      script.src = searchUrl;
      document.body.append(script);
      script.remove();
    }
    // JSONP 回调函数 
    window.updateSearchSuggestions = function (data) {
      console.log(data);
      // 搜索无结果
      if (data.AS.FullResults === 0) {
        content.innerHTML = "";
        return;
      }
      const suggestions = data.AS.Results.reduce((res, item) => {
        const arr = item.Suggests.map(val => val.Txt);
        return res.concat(arr);
      }, []);
      const suggestionItems = suggestions.map((item) => {
        const list = document.createElement("li");
        list.textContent = item;
        return list;
      });
      content.innerHTML = "";
      content.append(...suggestionItems);
    }
  </script>
</body>

</html>