搜索框的纯前端实现网页跳转

您所在的位置:网站首页 网页设计搜索框设置 搜索框的纯前端实现网页跳转

搜索框的纯前端实现网页跳转

2023-12-26 05:34| 来源: 网络整理| 查看: 265

@半路独行: 

var input, filter, ul, li, a, i, isOutUl, isOutInput;// 声明变量 input = document.getElementById('myInput');//获取搜索框的输入值 ul = document.getElementById("myUL");//下拉框 li = ul.getElementsByTagName('li'); function myFunction() { isOutInput = false; isOutUl = false; filter = input.value.toUpperCase();//将搜索框中的值转换成大写 // 循环所有列表,查找匹配项 for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0];//取得链接 if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && filter != '') { li[i].style.display = "";//如果是需要,则显示 ul.style.display = ""; } else { li[i].style.display = "none";//否则,不显示 } } } ul.onmouseleave = function () { isOutUl = true; leave(isOutUl); } input.onmouseleave = function () { isOutInput = true; leave(isOutInput); } var leave = function () { if (isOutUl && isOutInput) { ul.style.display = "none" }; } ul.onmouseenter = function () { isOutUl = false; } input.onmouseenter = function () { isOutInput = false; } var leave = function () { setTimeout(function () { if (isOutUl && isOutInput) { ul.style.display = "none" }; }, 50) }

都改过来了呀



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3