关于jsonp案例-类似百度搜索框

最新推荐文章于 2023-04-14 18:32:32 发布

原创最新推荐文章于 2023-04-14 18:32:32 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS和JavaScript实现下拉菜单的方法，通过动态修改HTML元素的样式和显示状态，响应用户输入，展示与搜索框输入匹配的选项列表。

在这里插入图片描述

*{margin: 0px; padding: 0px}
			#q{width: 300px; height: 30px; padding: 5px; border: 1px solid #f90; font-size: 16px}
			#ul1{border: 1px solid #f90; width: 310px; margin: 0px; display: none }
			#ul1 li{list-style: none}
			#div1{width: 312px; margin: 100px auto}
			#ul1 li a{line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block}
			#ul1 li a:hover{background-color: #f90; color: white}

function download(data){
                //取出数据
                var arr = data.s;
                var oUl = document.getElementById("ul1");
                oUl.innerHTML = "";
                oUl.style.display = "block";
                for(var i=0;i<arr.length;i++){
                    var newLi = document.createElement("li");
                    var oA = document.createElement("a");
                    oA.innerHTML = arr[i];
                    oA.href = "http://www.baidu.com/s?wd=" +arr[i];
                    oA.target ='_blank';
                    newLi.appendChild(oA);
                    oUl.appendChild(newLi);
                }
            }

window.onload = function(){
                var oQ = document.getElementById("q");
                var oUl = document.getElementById("ul1");
                oQ.onkeyup = function(){
                    var oValue = this.value;
                    if(!oValue){
                        oUl.style.display = "none";
                    }else{
                        //添加数据
                        var oScript = document.createElement("script");
                        oScript.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;
                        document.body.appendChild(oScript);
                    }
                }
            }