利用script的src指向服务端，创建一个简易的搜索框

最新推荐文章于 2024-07-10 14:03:37 发布

js易大师

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量233

点赞数 1

文章标签： javascript node.js

本文链接：https://blog.csdn.net/wangshuze123/article/details/107880622

版权

<style>
//设置输入框的样式
    #user {
        width: 500px;
        height: 35px;
        border: 1px solid black;
        border-radius: 5px;
        position: relative;
        left: 500px;
        top: 150px;

    }
    //设置输入后提示的列表样式
    .list{
        list-style:none;
        width:470px;
        border:1px solid #b6b6b6;
        border-top:none;
        position:relative;
        left: 500px;
        top:145px;
        display:none;
    }
    .list li{padding:5px;}
</style>

<body>
    <input type="text" id="user">
    <ul class="list"></ul>
    <script>
    //声明全局变量
        var script, input, ul;
        init();
        //获取input  ul  设置输入的监听事件
        function init() {
            input = document.querySelector("#user");
            ul=document.querySelector("ul");
            input.addEventListener("input", inputHandler);
        }
	//清空原有的script
        function inputHandler(e) {
           
            if (script) {
                script.remove();
                script = null;
            }
            script = document.createElement("script");
            script.src =
                "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +
                	//输入内容传送到百度的服务器
                input.value +
                "&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
            document.body.appendChild(script);
        }
      //添加下拉列表 callback为返回值的固定函数名称
      //data.s就是输入关键字的弹出的相关内容数组
        function callback(data) {
           
            if (!data) return;
            ul.style.display = "block";
            ul.innerHTML = data.s.reduce((value, item) => {
                value += `<li><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item}&rsv_t=d43fF1XPAMaQzc5CAnGBSyeSlyE%2FIBrX2IMCigJqPsf0iHkuVId1KZ4SE3g&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=13&rsv_sug1=5&rsv_sug7=100&rsv_sug2=1&prefixsug=nihao&rsp=0&inputT=2416647&rsv_sug4=2945215" target="_blank">${item}</a></li>`;
                return value;
            }, "")
        }
    </script>
</body>

如有错误，希望大佬指出

js易大师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用script的src指向服务端，创建一个简易的搜索框

<style>//设置输入框的样式 #user { width: 500px; height: 35px; border: 1px solid black; border-radius: 5px; position: relative; left: 500px; top: 150px; } //设置输入后提示的列表样式 .list{
复制链接

扫一扫