HTML+CSS完结智能查找作用

我正在参加「码上挑战赛」详情请看：码上挑战赛来了！

我是Sam9029，一个前端

Sam9029的主页:Sam9029的主页

`‍‍祝贺你，若此文你以为写的不错，不要小气你的赞扬，求保藏，求谈论，求一个大大的赞！

嘿嘿，今日，我预备写一个 查找框的智能完结查找后呈现，回来成果的作用

将运用 HTML+CSS + JS 来完结这个作用

以下是需求

需求

  • 作用精良，像查找界面的页面，这当然难不倒我啦
  • 查找后在下方展现模糊查找匹配的数据
  • 模糊匹配的数据种查找的关键字应该加粗标红处理

源码及作用

源码地址：

展现作用：

HTML+CSS完结智能查找作用

思路

HTML 结构

  • 居中查找框
  • 运用图片模糊布景
<div class="mask"></div>
<div class="wrap">
    <div class="searchContainer">
        <div id="searchSubContainer">
            <input type="text" name="" id="searchInput" placeholder="输入 关键词 空格隔开">
            <ul id='resultContainer'>
                <!-- JS 动态展现成果 -->
            </ul>
        </div>
        <button id="searchBtn" title="查找">查找</button>
    </div>
</div>

JS逻辑

  • 设定原始的本地查找库匹配数据
// 查找数据条目库
let dataBase = [
    '一 一 一 一 一',
    '将进酒 唐代诗仙李白沿用乐府古题创作的七言歌行',
    '君不见 黄河之水天上来，奔流到海不复回',
    '君不见 高堂明镜悲白发，朝如青丝暮成雪',
    '人生满意须尽欢，莫使金樽空对月',
    ………………
    //更多数据请检查 源码地址
]
  • 运用DOM API 获取查找框 的值 以及 查找按钮
    • 绑定查找框的查找函数
// 获取
let searchInput = document.querySelector('#searchInput') 
let searchBtn = document.querySelector('#searchBtn') 
let resultContainer = document.querySelector('#resultContainer') 
// 绑定查找事情
searchBtn.addEventListener('click',search)
searchInput.addEventListener('change',search)
  • 创建查找函数—及其内部操作
    • 字符串去掉空格
    • 空值判别
    • 清除查找前史成果
    • 查找关键字去重
    • 匹配本地设置的数据
    • 在回来数据中为 关键词 加标签 处理（加粗标红）
    • 展现成果添加 到页面
function search(){
    // 字符串去掉空格
    let searchInputString = searchInput.value.trim()
    // 空值判别
    if(!searchInputString){
        // 清除前史成果
        resultContainer.innerHTML = ''
        console.log('输入值为空')
        return
    }
    // 转成数组
    let searchInputArray = searchInputString.split(' ')
    // 去掉数组中剩余的空格占位
    searchInputArray = searchInputArray.filter(item=>item)	
    // 数组去重
    // Set数据类型 要转化数组
    searchInputArray = Array.from(new Set([...searchInputArray]))
    // 检测以上过程
    // console.log(searchInputString,searchInputString.split(' '),searchInputArray)
    // console.log(searchInputArray)
    // 比照数据库 提取满意的数据成果
    let resultList = [];
    // 暂存每次循环比照 提取的成果 
    // 之后将每次循环比照提取的暂存成果 兼并至成果数组
    let temp = []
    for(let i=0;i<searchInputArray.length;i++){
        // 亦可在此处 关键词 加标签 处理
        temp = dataBase.filter(item => item.includes(searchInputArray[i]))
        // 将每次循环比照提取的暂存成果 兼并至成果数组
        resultList = resultList.concat(temp)
    }
    // 只回来 关键词一起满意的 查找目？？？
    // 数组去重
    resultList = Array.from(new Set([...resultList]))
    // 清除前史成果
    resultContainer.innerHTML = ''
    // 成果 关键字 处理
    for(let i=0;i<searchInputArray.length;i++){
        for(let j=0;j<resultList.length;j++){
            // 
            let keyword = searchInputArray[i]
            let resultItem = resultList[j]
            // 存在多条成果，不一定每个成果，都包含所有关键词
            // 关键词 是否 存在
            let keywordIsExist = resultList[j].includes(keyword)
            console.log(keywordIsExist)
            // 存在则 关键词 加标签处理
            if(keywordIsExist){
                // 替换 关键词 并 加上标签回来
                // resultList[j] = resultList[j].replace(keyword,`<strong>${keyword}</strong>`)
                resultList[j] = resultList[j].split(keyword).join(`<strong>${keyword}</strong>`)
                // 一个成果 条目数据 或许包含多个关键词？？
                console.log(resultList[j])
            }					
        }
    }
    // 展现成果
    // searchInputArray
    for(let i=0;i<resultList.length;i++){
        // 添加 到页面
        let li = document.createElement('li')
        li.innerHTML = resultList[i]				
        resultContainer.appendChild(li)
    }		
}

待改进

  • 键盘事情判别，键盘enter也可触发查找
  • 输入的自动判别查找
    • 一起绑定防抖函数，提高运用体验，避免过度查找

我是Sam9029，一个前端，深信应无所往

文章若有过错，敬请纠正

**‍‍祝贺你，都看到这了，求保藏，求谈论，求一个大大的赞！不过分吧**

Sam9029的主页:Sam9029的主页