用jquery实现简单的某度搜索框效果-白红宇的个人博客

发布日期：2021-05-08 13:33:00 浏览次数：19 分类：原创文章

本文共 1565 字，大约阅读时间需要 5 分钟。

<!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>Document</title></head><body>    <div class="box">        <div class="input">            <input type="text" id="txt">            <input type="button" value="某度一下" id="btn">        </div>        <ul>        </ul>    </div></body><script src="../jquery-2.2.4.js"></script><script>    $("#txt").on("input",function(){            if($(this).val() == ""){                $("ul").empty();            // 如果没有搜索清空子元素            return;        }       $.ajax({               url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",           dataType:"jsonp",           jsonp:"cb",           data:{                   wd:$(this).val()           },           success:(res)=>{                   let str ="";               for(let i=0;i<res.s.length;i++){                       str+=`<li>${      res.s[i]}</li>`               }               $("ul").html(str);           }       })    })                // 百度地址的wd 后面拼接的搜索的内容    $("#btn").click(function(){            location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+$('#txt').val()+"&fenlei=256&rsv_pq=a178c16800004b1e&rsv_t=15b6eWm6TwKVbdEkFLxv5JBkg%2FdxQC%2BtJFo%2BSmdbHcgYFVzV3%2FvmfEHFnLE&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=10&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=%25E4%25B8%258A%25E6%25B5%25B7&rsp=6&inputT=1512&rsv_sug4=1992"    })   </script></html>

上一篇：gulp 的原生方法

下一篇：jQuery实现轮播图效果

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章