Js 特效案例-百度搜索框展示

493 阅读1分钟

这是我参与11月更文挑战的第13天,活动详情查看:2021最后一次更文挑战

一、HTML布局

实现设计好相关需要的区域,html布局如下:

1、搜索区域:包含搜索框和搜索按钮

2、搜索结果匹配区域

3、背景区域:为了更加清晰的看到搜索结果区域

布局核心html代码如下:

 <div class="data_fram">
        <div class="search">
            <input type="text" id="value" placeholder="输入想要搜索的内容">
            <input type="submit" id="submit" value="搜索">
        </div>
  </div>
  <div class="show"></div>
  <div class="test">我是背景内容</div>

二、CSS样式

因为主要是为了练习一下javascript的代码,html布局的样式信息怎么方便怎么来,样式如下:

image.png

image.png

加完样式信息后的布局如下图:

image.png

三、Javascript特效

1、设置搜索数据:这里为了简单,就自定义一个数组数据,一般正式的网站会通过向自己的服务器发送请求来获取数据库中的存储好的数据;获取搜索输入框和搜索结果匹配展示框标签对象

let data = ["javascript", "css", "html", "c++", "java", "python", "php", "vue"];
let input = document.getElementById("value");
let show = document.getElementsByClassName("show")[0];

2、搜索输入框对象设置获取焦点响应事件,当用户往输入框输入一个字符时,就立即与数据库进行模糊匹配,将匹配结果展示到搜索结果匹配展示区域。

input.addEventListener('keyup', () => {
    show.style.display = "block";
    let showStr = "";
    data.forEach((item) => {
        if (item.indexOf(input.value) != -1) {
            showStr += `<p>${item}</p>`
        }
    })
    if (!input.value || showStr == "") {
        show.innerHTML = "暂无结果"
    } else {
        show.innerHTML = showStr;
    }
})

3、搜索输入框对象设置获取失焦响应事件,当鼠标焦点不在输入框是,清空搜索结果匹配展示区域。

input.addEventListener('blur', () => {
    show.style.display = "none";
    input.value = "";
})

B站视频网址:www.bilibili.com/video/BV1wv…