现在很多网站都有智能搜索功能,它能根据用户的输入自动提示出需要补全的数据,方便用户的查询,下面我们用JavaScript来简单实现它。
html部分:
<div id="box">
<input type="text" name="" id="" placeholder="请输入搜索关键字,关键字之间用空额隔开">
<ul id="searchList"></ul>
</div>
css部分:
<style>
#box{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 100px;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
input {
width: 300px;
padding-left: 10px;
}
li{
width: 316px;
border: 1px solid black;
}
li>span{
color: red;
}
</style>
js部分:
<script>
var content = [
'不是这年没有味道了,而是现在过年时,最快乐的人不是你!',
'既然有“劝酒”文化,可不可以同样“劝书”呢?',
'我脱口而出:是我自己拿的,不是老爸让我拿去买烟的',
'只是晚上睡眠不好,倒不是内疚,实在是爸妈房里太吵!',
'开会时我有点不舒服,领导问我要不要紧?',
'既然不幸福可以随时离,你还怕什么呢',
'现在的年轻人,应该多向家里要钱,不然这些钱留在家人手里',
'只要跟着鳄鱼一起翻转且速度够快的话,还可以把鳄鱼头给拧下来',
'满口黄腔多心地善良,沉默君子定多加堤防!',
'爱上你不是我的错,都是你胸大腰细惹的祸',
]
var inp = document.querySelector('input');
var showBox = document.getElementById('searchList');
var box = document.getElementById('box');
// 边输入边验证
inp.oninput = () => {
createNode();
}
// 获取关键词
function getVal() {
let inpVal = inp.value;
let arrVal = [];
//关键字去重
arrVal = inpVal.trim().split(' ').filter(item => {
return item && !arrVal.includes(item);
})
return arrVal;
}
// 根据搜索词创建节点
function createNode() {
//初始化ul列表
showBox.innerHTML = '';
let val = getVal();
let newArr = [];
// 判断input框是否为空
if (val.length < 1) {
return;
}
for (let i = 0; i < content.length; i++) {
// 判断关键词是否都包含在数据里面
let result = val.some(item => {//如果想要关键词都包含在数据中就使用every方法
return content[i].includes(item);
})
if (result) {//都包含则向newArr添加
let str = content[i];
//关键词替换用于关键词颜色改变
for (let j = 0; j < val.length; j++) {
str = str.replaceAll(val[j], "<span>" + val[j] + "</span>");
}
newArr.push(str);
}
}
//创建并渲染
for (let i = 0; i < newArr.length; i++) {
let li = document.createElement('li');
li.innerHTML = newArr[i];
searchList.appendChild(li);
}
}
</script>