html搜索框的字体放上消失,搜索框的纯前端实现网页跳转

本文介绍了一种使用JavaScript实现的搜索框实时过滤显示列表的方法。通过监听用户输入并即时更新显示内容来帮助用户快速找到所需信息。涉及DOM操作、事件处理及字符串匹配等技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@半路独行:

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)

}

都改过来了呀

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值