原生js实现简单智能关键词搜索功能 |
您所在的位置：网站首页 › 关键词搜索功能 › 原生js实现简单智能关键词搜索功能 |
|
现在很多网站都有智能搜索功能，它能根据用户的输入自动提示出需要补全的数据，方便用户的查询，下面我们用JavaScript来简单实现它。 html部分： css部分： #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; }js部分： 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], "" + val[j] + ""); } newArr.push(str); } } //创建并渲染 for (let i = 0; i < newArr.length; i++) { let li = document.createElement('li'); li.innerHTML = newArr[i]; searchList.appendChild(li); } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |