利用jsonp跨域调用百度js实现搜索框智能提示

利用 JSONP 跨域调用百度 JS 实现搜索框智能提示是一个常见的前端开发技巧。本篇攻略将详细讲解 JSONP 的使用步骤以及相应的注意事项。

一、JSONP 的基础知识

JSONP（JSON with Padding）是一种跨域技术，它利用了 script 标签的跨域特性来实现。通常情况下，我们在同源代码中无法通过 AJAX 请求一个跨域的 API，这时候就可以使用 JSONP 来解决这个问题。

JSONP 的基本原理是，我们创建一个 script 标签来请求一个跨域的 API 地址，并且在 URL 中传递一个回调函数名称。服务器在返回数据时，会将数据作为参数传递给回调函数，这样就实现了跨域请求。

示例一：

如果我们要用 JSONP 请求百度的搜索提示接口，可以这样写：

function jsonp(url, callback) {
  let script = document.createElement("script");
  script.src = url;
  document.body.appendChild(script);
  window[callback] = function (data) {
    // 处理数据
  };
}
// 调用 JSONP
jsonp("https://suggest.baidu.com/su?wd=rest", "handleData");

在上面的代码中，jsonp 函数接收两个参数，一个是跨域接口的 URL，另一个是回调函数名称。我们创建一个 script 标签，并将接口地址赋值给 src 属性，这样就实现了跨域请求。同时，我们定义了一个全局函数 handleData，这个函数会在服务器返回数据时被调用。

需要注意的是，我们需要将 script 标签插入到页面中才能触发请求，并且回调函数必须定义在全局作用域中，这样才能在请求返回数据时被正确调用。

二、调用百度提示接口

在了解 JSONP 的基础知识之后，我们可以来尝试一下调用百度的搜索提示接口。

示例二：

function jsonp(url, callback) {
  let script = document.createElement("script");
  script.src = url;
  document.body.appendChild(script);
  window[callback] = function (data) {
    // 处理数据
    console.log(data.s);
  };
}
// 调用 JSONP
jsonp("https://suggest.baidu.com/su?wd=rest", "handleData");

在上面的代码中，我们请求了百度的搜索提示接口，并在控制台输出了返回数据中的 s 字段，这个字段包含了搜索提示的数据。如果你使用的是 Chrome 浏览器，可以通过右键->检查->控制台来打开开发者工具，然后在 Console 标签下就可以看到输出的数据。

需要注意的是，百度的搜索提示接口需要传递一个 wd 参数来指定搜索关键字，你可以将这个参数换成自己想要搜索的关键字。

三、封装成自己的插件

最后，我们可以将这段代码封装成一个单独的插件，方便在其他项目中调用。

示例三：

class SearchSuggest {
  constructor(input, options) {
    this.input = input;
    this.options = Object.assign({
      api: "https://suggest.baidu.com/su",
      callback: "callback",
      handleData: null,
    }, options);
    this.init();
  }
  init() {
    this.bindEvents();
  }
  bindEvents() {
    this.input.addEventListener("input", (e) => {
      let val = e.target.value.trim();
      if (val) {
        this.search(val);
      }
    });
  }
  search(val) {
    let url = `${this.options.api}?wd=${val}&cb=${this.options.callback}`;
    let script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
    window[this.options.callback] = (data) => {
      if (this.options.handleData && typeof this.options.handleData === "function") {
        this.options.handleData(data);
      } else {
        console.log(data.s);
      }
    };
  }
}
// 调用插件
let input = document.getElementById("search-input");
let suggest = new SearchSuggest(input, {
  handleData: (data) => {
    console.log(data.s);
  },
});

在上面的代码中，我们将 JSONP 调用的逻辑封装成了一个 SearchSuggest 类，这个类接收两个参数，一个是要绑定的输入框元素，另一个是可选的配置选项。当用户在输入框内输入内容时，如果内容不为空，则会触发搜索，调用百度的搜索提示接口，并将返回的数据传递给 handleData 方法来处理。

需要注意的是，我们在这里使用了 ES6 的 class 语法，以及 Object.assign 方法来设置默认配置项。同时，我们使用了箭头函数和模板字符串来简化代码。