类似百度搜索下拉框的实现

从百度截图如下:

要实现的功能与该图类似,只不过没有详细优化样式。哈哈,大家不要介意。(还有我的这个功能用的是百度的接口)

我用了两种方式来实现这个功能,一种是原生的js方式,一种是jQuery的方式。可以对比。

1、用原生方式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload=function () {
            var oText=document.getElementById("text");
            var oList=document.getElementById("list");

            oText.oninput=function () {
                let oScript=document.createElement('script');
                oScript.src= `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oText.value}&cb=show`;
                document.head.appendChild(oScript);
            }
        }

        function show(json) {
            var oList=document.getElementById("list");
            oList.innerHTML='';
            json.s.forEach(str=>{
                let oLi=document.createElement('li');
                oLi.innerHTML=str;
                oList.appendChild(oLi);
            })
        }
    </script>
</head>
<body>
<input type="text" id="text">
<ul id="list"></ul>
</body>
</html>

2、jQuery方式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#text").on('input',function () {
                $.ajax({
                    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                    data:{wd:$("#text").val()},
                    dataType:'jsonp',
                    jsonp:'cb',
                    success(json){
                        $("#list").html('');
                        json.s.forEach(str=>{
                            $(`<li>${str}</li>`).appendTo("#list");
                        })
                    },
                    error(err){
                        alert('出错了');
                    }

                })
            })
        })
    </script>
</head>
<body>
<input type="text" id="text">
<ul id="list"></ul>
</body>
</html>

以上代码运行结果如下:


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭