HTML+CSS实现智能搜索效果

---

嘿嘿，今天，我准备写一个 搜索框的智能实现搜索后出现，返回结果的效果

将使用 HTML+CSS + JS 来完成这个效果

以下是需求

需求

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

源码及效果

源码地址：

展示效果：

思路

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，一个前端，坚信应无所往