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

从百度截图如下：

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

我用了两种方式来实现这个功能，一种是原生的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>

以上代码运行结果如下：

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

猜你喜欢