百度搜索框案例,jsonp实现搜索功能


想要实现该功能得先有一个接口–>百度搜索框数据接口

API地址后面进行拼接
在这里插入图片描述
wd=后面跟的就是要搜索的关键词,因此我们只需要将input框中的值传到wd=后面,然后通过jsonp跨域实现搜索功能
jsonp跨域详解
附上全部代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索框title>
    <style>
        *{ margin: 0; padding: 0; }
        ul,li{ list-style: none; width: 300px; }
        a{ text-decoration: none; }
        #q{ width: 300px; box-sizing: border-box; }
        #ul1{ border: 1px solid #ccc; }
        #ul1 li{ margin-top: 10px; }
        #ul1 li:hover{ background-color: aqua; }
    style>
    <script>
        function show(data){
            var arr = data.s;
            var ul1 = document.getElementById("ul1");
            ul1.innerHTML = "";
            ul1.style.display = "block";

            for(var i = 0;i < arr.length;i ++){
                var newLi = document.createElement("li");
                var A = document.createElement("a");
                A.innerHTML = arr[i];
                A.href = "http://www.baidu.com/s?wd=" + arr[i];
                A.target = '_blank';
                newLi.appendChild(A);
                ul1.appendChild(newLi);
            }
        }
    script>
    <script>
        window.onload = function() {
            var q = document.getElementById("q");
            var ul1 = document.getElementById("ul1");
            
			//给搜索框一个事件,键盘每按下抬起后执行一次函数,从而使得下拉框中的列表
			//一直也在变化
            q.onkeyup = function() {
                var value = this.value;
                
                if(!value) {
                    ul1.style.display = "none";
                }else{
                    var oldscript = document.getElementById("script");
                    var script = document.createElement("script");
                    script.id = "script";
                    script.src = `https://suggestion.baidu.com/su?wd=${this.value}&cb=show`;
                    oldscript.parentNode.replaceChild(script,oldscript);
                }
            }
        }
    script>
head>
<body>
    <div id="div1">
        <input type="text" id="q">
        <ul id="ul1">
        ul>
    div>
    <script id="script">script>
html>

你可能感兴趣的:(AJAX,js,前端,html,css,jsonp)