类似百度搜索框实时搜索的实现

本文介绍了如何利用HTML、CSS和JavaScript技术来创建一个类似百度搜索框的实时搜索功能。首先展示了HTML代码用于构建搜索框结构,接着讨论了CSS样式以美化搜索框并实现交互效果,最后通过JavaScript实现搜索框输入时的实时过滤和显示结果。

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

1、html代码

<input type="text" name="ProjectNumber" id="ProjectNumber" />
            <div class="contain__border__search" id="ProjectNumberSearch">
                
            </div>

2、css样式

.contain__border__search {
    display: none;
	position: relative;
	z-index: 9;
	max-height: 200px;
	overflow: auto;
	border: 1px solid #ccc;
	background: #fff;
	width: 60%;
	margin-left: 35%;
	margin-top: -1px;
	border-top: none;
	box-shadow: 0 0 1px #ccc;
}
.contain__border__search p {
	font-size: 14px;
	height: 20px;
	line-height: 20px;
}
.contain__border__search p:hover {
	background: rgba(245, 239, 242, 1);
}

3、js实现

// 项目编号加keyup事件
    $("#ProjectNumber").keyup(function () {
        $("#ProjectNumberSearch").html("");   // 初始搜索框为空
        var code = $("#ProjectNumber").val();    // 获取输入框中的值
        if (code == "") {                      // 如果为空,隐藏搜索框
            $("#ProjectNumberSearch").css("display", "none");
            return;
        } else {
            for (var i = 0; i < systemCode.length; i++) {   // systemCode为待匹配的所有值
                for (var j = 0; j < systemCode[i].length; j++) {
                    var pat = new RegExp(code, "i");
                    if (pat.test(systemCode[i][j])) {     // 如果匹配到,显示搜索框和内容
                        $("#ProjectNumberSearch").css("display", "block");
                        $("#ProjectNumberSearch").append("<p onclick='writeSystemCode(this)' ontouchstart='codeStart(this)' ontouchend()='codeEnd(this)' >" + systemCode[i][j] + "</p>");
                    }
                }
                
            }
        }
        if ($("#ProjectNumberSearch").html() == "") {    // 如果搜索框为空,隐藏
            $("#ProjectNumberSearch").css("display", "none");
        }
    });

// 当点击的时候,将内容写入表单,隐藏框
function writeSystemCode(p)
{
    $("#ProjectNumber").val(p.innerHTML);
    $("#ProjectNumberSearch").css("display", "none");
    $("#ProjectNumberSearch").html("");
}
// 开始触碰事件
function codeStart(p)
{
    $(p).css("background", "rgba(245, 239, 242, 1)");
}
// 触碰结束事件
function codeEnd(p) {
    $(p).css("background", "#fff");
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值