百度搜索框智能提示案例jsonp

1. 什么是百度搜索框智能提示案例jsonp？
   百度搜索框智能提示案例jsonp是一种前端技术，通过百度接口获取搜索框中用户所输入的关键词，并且在搜索结果列表中自动进行智能提示，使得用户更快速地找到自己想要搜索的内容。jsonp即为JavaScript和jsonp请求方式的缩写，是一种前端通过跨域请求获取数据的方式。

2. 实现步骤

（1）在前端页面中声明jsonP请求函数，例如：

function sug(value){
    var url = "http://suggestion.baidu.com/su?wd="+value+"&cb=show";
    var script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
}
function show(data){
    console.log(data.s);
}

其中，请求的url参数包含了用户输入的关键词值value和回调函数show的名称。百度接口返回的数据被赋给了回调函数show的参数data。

（2）在html页面中创建搜索框，并实现联想自动提示，例如：

<input type="text" onkeyup="sug(this.value)">

用户在搜索框中输入关键词时，会触发sug函数，jsonp请求将用户输入的关键词提交至百度接口，接口返回相关联想词汇，然后通过回调函数show的形参data接收，最后在控制台输出data.s即用户所能看到的联想词汇列表。

1. 示例说明

（1）请求“苹果”一词的联想词汇：

function sug(value){
    var url = "http://suggestion.baidu.com/su?wd="+value+"&cb=show";
    var script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
}
function show(data){
    console.log(data.s);
}

在搜索框中输入“苹果”一词，控制台会输出以下联想词汇列表：

["苹果", "苹果12", "苹果新品", "苹果空调", "苹果x", "苹果12发布会", "苹果电脑", "苹果耳机", "苹果手表", "苹果专卖店"]

（2）请求“任天堂”一词的联想词汇：

function sug(value){
    var url = "http://suggestion.baidu.com/su?wd="+value+"&cb=show";
    var script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
}
function show(data){
    console.log(data.s);
}

在搜索框中输入“任天堂”一词，控制台会输出以下联想词汇列表：

["任天堂", "任天堂明星大乱斗", "任天堂游戏机", "任天堂会员", "任天堂直播", "任天堂游戏", "任天堂NX", "任天堂电视游戏机", "任天堂游戏王", "任天堂官网"]