搜索框源码——带搜索结果联想-前端板块造梦空间论坛-技术交流-造梦空间论坛

搜索框源码——带搜索结果联想

效果图:

3d32ed8d0a111725

源码:

HTML部分:

<div class="container">
<h2>搜索</h2>
<form>
<div class="form-group">
<input type="text" id="myInput" placeholder="请输入搜索内容" class="form-control">
<ul id="myList"></ul>
</div>
</form>
</div>
<div class="container">
        <h2>搜索</h2>
        <form>
            <div class="form-group">
                <input type="text" id="myInput" placeholder="请输入搜索内容" class="form-control">
                <ul id="myList"></ul>
            </div>
        </form>
    </div>
<div class="container"> <h2>搜索</h2> <form> <div class="form-group"> <input type="text" id="myInput" placeholder="请输入搜索内容" class="form-control"> <ul id="myList"></ul> </div> </form> </div>

CSS部分:

/* 设置背景 */
body {
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
/* 设置搜索框 */
.container {
width: 450px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.container h2 {
text-align: center;
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.form-control {
width: 430px;
padding: 10px;
margin-right: 10px;
border: none;
border-radius: 3px;
background-color: #f5f5f5;
}
/*搜索列表*/
#myList {
padding: 0;
margin: 0;
}
#myList li {
height: 35px;
line-height: 35px;
display: block;
margin: 0px 10px;
}
#myList li:hover {
font-size: 1.1em;
}
/* 设置背景 */
        body {
            background-color: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        /* 设置搜索框 */
        .container {
            width: 450px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
            padding: 20px;
        }
        .container h2 {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        .form-control {
            width: 430px;
            padding: 10px;
            margin-right: 10px;
            border: none;
            border-radius: 3px;
            background-color: #f5f5f5;
        }
        /*搜索列表*/
        #myList {
            padding: 0;
            margin: 0;
        }
        #myList li {
            height: 35px;
            line-height: 35px;
            display: block;
            margin: 0px 10px;
        }
        #myList li:hover {
            font-size: 1.1em;
        }
/* 设置背景 */ body { background-color: #f2f2f2; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif; } /* 设置搜索框 */ .container { width: 450px; background-color: #fff; border-radius: 10px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); padding: 20px; } .container h2 { text-align: center; font-size: 24px; color: #333; margin-bottom: 20px; } .form-control { width: 430px; padding: 10px; margin-right: 10px; border: none; border-radius: 3px; background-color: #f5f5f5; } /*搜索列表*/ #myList { padding: 0; margin: 0; } #myList li { height: 35px; line-height: 35px; display: block; margin: 0px 10px; } #myList li:hover { font-size: 1.1em; }

JavaScript部分:

//数组数据
var keywords = ["造梦空间", "造梦空间论坛", "造梦科技"]; // 相关的关键词列表
var input = document.getElementById("myInput");
var list = document.getElementById("myList");
input.addEventListener("input", function () {
var keyword = input.value.toLowerCase();
var filteredKeywords = keywords.filter(function (item) {
return item.toLowerCase().includes(keyword);
});
// 清空列表
list.innerHTML = "";
if (input.value == "") {
} else {
// 生成匹配的列表项
filteredKeywords.forEach(function (item) {
var li = document.createElement("li");
li.textContent = item;
list.appendChild(li);
});
}
});
//点击匹配事件
document.addEventListener('DOMContentLoaded', function () {
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName === 'LI') {
var content = event.target.innerHTML;
document.getElementById('myInput').value = content
// 清空列表
list.innerHTML = "";
}
});
});
//数组数据
        var keywords = ["造梦空间", "造梦空间论坛", "造梦科技"]; // 相关的关键词列表

        var input = document.getElementById("myInput");
        var list = document.getElementById("myList");

        input.addEventListener("input", function () {
            var keyword = input.value.toLowerCase();
            var filteredKeywords = keywords.filter(function (item) {
                return item.toLowerCase().includes(keyword);
            });
            // 清空列表
            list.innerHTML = "";
            if (input.value == "") {
            } else {
                // 生成匹配的列表项
                filteredKeywords.forEach(function (item) {
                    var li = document.createElement("li");
                    li.textContent = item;
                    list.appendChild(li);
                });
            }
        });
        //点击匹配事件
        document.addEventListener('DOMContentLoaded', function () {
            var ul = document.querySelector('ul');

            ul.addEventListener('click', function (event) {
                if (event.target.tagName === 'LI') {
                    var content = event.target.innerHTML;
                    document.getElementById('myInput').value = content
                    // 清空列表
                    list.innerHTML = "";
                }
            });
        });
//数组数据 var keywords = ["造梦空间", "造梦空间论坛", "造梦科技"]; // 相关的关键词列表 var input = document.getElementById("myInput"); var list = document.getElementById("myList"); input.addEventListener("input", function () { var keyword = input.value.toLowerCase(); var filteredKeywords = keywords.filter(function (item) { return item.toLowerCase().includes(keyword); }); // 清空列表 list.innerHTML = ""; if (input.value == "") { } else { // 生成匹配的列表项 filteredKeywords.forEach(function (item) { var li = document.createElement("li"); li.textContent = item; list.appendChild(li); }); } }); //点击匹配事件 document.addEventListener('DOMContentLoaded', function () { var ul = document.querySelector('ul'); ul.addEventListener('click', function (event) { if (event.target.tagName === 'LI') { var content = event.target.innerHTML; document.getElementById('myInput').value = content // 清空列表 list.innerHTML = ""; } }); });
请登录后发表评论

    没有回复内容

© 造梦空间论坛
❤富强❤