# baidu-search-jsonp-demo

**Repository Path**: kevinleeeee/baidu-search-jsonp-demo

## Basic Information

- **Project Name**: baidu-search-jsonp-demo
- **Description**: 这是一个关于涉及`JSONP`跨域解决方案的案例。模拟一个百度搜索的输入框，输入内容会根据内容发起数据请求。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-10
- **Last Updated**: 2023-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 百度联想词案例
这是一个关于涉及`JSONP`跨域解决方案的案例。模拟一个百度搜索的输入框，输入内容会根据内容发起数据请求。

## 目的
通过输入框内容和指定一个`setDatas`的方法名称并定义`setDatas`函数给后端执行，实现对数据请求后的渲染更新到页面上。

## `API`
百度的`JSONP`请求地址是`https://www.baidu.com/sugrec?&prod=pc&wd=${value}&cb=${callbackName}`。

## 页面结构
```HTML
<!-- HTML -->
<div class="search-wrap">
  <div class="input-wrap">
  <input type="text" class="search-input J_searchInput" />
</div>
<div class="list-wrap">
  <ul class="wd-list J_wdList"></ul>
</div>
</div>

<!-- 生成li的模版 -->
<script type="text/html" id="J_listTpl">
  <li class="wd-item">
    <a 
      href="https://www.baidu.com/s?wd={{wdLink}}" 
      class="wd-lk"
    >{{wd}}</a>
  </li>
</script>
```

## 函数定义
`window.setDatas`函数是将`jsonp`执行时找到的当前函数。
```js
window.setDatas = function (data) {
  // console.log(data);
  //{q: '饿了么', p: false, g: Array(10), slid: '265527256434550', queryid: '0x144f17ee1cc4776'}
  renderList(data);
};
```