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

最新推荐文章于 2021-08-05 20:34:18 发布

原创最新推荐文章于 2021-08-05 20:34:18 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#实时搜索 #html #js

前端漫漫路专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何利用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");
}