用JavaScript写一个简易的自动搜索框

千帆过尽皆不是

已于 2024-06-29 12:02:56 修改

阅读量791

点赞数 22

分类专栏： JavaScript 文章标签：笔记

于 2024-06-28 13:39:22 首次发布

本文链接：https://blog.csdn.net/qq_52530691/article/details/137770584

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一. HTML 部分代码及代码解释

HTML 中需要注意的是，JavaScript 的引用的位置。JavaScript的位置引用不合适可能会导致代码报错，或者 JavaScript 获取到的内容为空。所以 JavaScript 一般引用在代码最下面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>

    <!-- 链接 index.css 页面 -->
    <link rel="stylesheet" href="index.css"> 
</head>
<body>
    
    <div class="search" id="search">

        <!-- 搜索框 -->
        <div class="search-top" id="search-top">
            <input type="text" id="search-input" placeholder="请输入" value="" oninput="myScript()">
        </div>

        <!-- 数据展示 -->
        <div class="search-content" id="search-content">

            <ul class="ul" id="ul">

            </ul>
        </div>
    
    </div>

</body>

<!-- 链接 index.js 页面 -->
<!-- 注意引入的位置，引入的位置会影响加载的顺序  顺序不对则js会报错 -->
<script type="text/javaScript" src="index.js"></script>
</html>

二. CSS 部分代码及代码解释

HTML 部分是用 input 输入框和 ul 列表组成的，他们都有自己的默认样式，并且默认样式的优先级比较高，需要自己手动改变。

calc() 函数 用于动态计算长度值。可以获取 <div> 元素的宽度。

height: calc(50vh); /*当前窗口高度的 50%*,动态的,会随页面的大小变动而变动*/

width: calc(25vw); /*当前窗口宽度的 25%*,动态的,会随页面的大小变动而变动*/

需要注意的是，calc() 函数中是可以有计算公式的，但是需要复合calc的规则。并且，运算符前后都需要保留一个空格，例如：

width: calc(100% - 50px)

width: calc(50% - 1em);

::-webkit-scrollbar 是CSS 伪类元素，作用是设置 overflow:scroll; 元素的滚动条样式。

::-webkit-scrollbar {

display: none; /* 浏览器隐藏滚动条 */

}


html,body{
    margin: 0;
    padding: 0;
    font-family: STXinwei; /* 华文新魏*/
}

/* -----------------------------------分割线-------------------------------*/

.search{

    height: calc(50vh);     /*当前窗口高度的 50%*,动态的,会随页面的大小变动而变动*/
    width: calc(25vw);      /*当前窗口宽度的 25%*,动态的,会随页面的大小变动而变动*/
    font-size: 36px;
    margin: 100px auto;

}

.search-content{

    width: 100%;
    height: 100%;
    border: 1px solid black;
    overflow-y: scroll;     /* 仅垂直方向显示滚动条 */
}


::-webkit-scrollbar {
    display: none;  /* 浏览器隐藏滚动条 */
  }
/* -----------------------------------分割线-------------------------------*/

input{
    width: 100%;
    height: 60px;
    border: 1px solid black;    /* input 默认border 不为1*/
    padding: 0;    /* input 默认padding 不为0*/
    font-family: STXinwei; /* input 字体是默认的,可以自行更改 */
    font-size: 48px;
}

ul{
    padding: 0;  /* 消除li前面空白 */
    margin: 0;  /* ul 默认外边距不为0,需要手动设置 */
}

li{
    list-style:none;    /* 取消 li 前面的点 */
    margin: 10px;
}

三. JS 部分代码及代码解释

3.1 代码逻辑

HTML 中 input 输入框中设置监听事件 oninput
input 输入框内容发生变化时，立即调用 search() 函数
在 search() 函数中进行数据加载和逻辑判断

3.2 注意事项

indexOf 注意事项

indexOf() 方法可返回，某个指定的字符串值在字符串中首次出现的位置。

如果要检索的字符串值没有出现，则该方法返回 -1

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

if 注意事项

if(-1) 等价于 if(true)

let test = 1;
if(-1){
    test= 2 ;
}
console.log(test)
//  输出为 2

3.3 代码片段


let ul = document.getElementById("ul")

// 搜索功能
function search(){

    let value =  document.getElementById("search-input").value

    // 数据展示
    let dataList = ["123","123测试","123lmh","lmh","lmh123","lmh测试","测试","测试123","测试lmh","测试成功","测试失败"]

    for(let i=0; i<dataList.length ;i++){

        // if(-1) 等价于 if(true),所以要判断是否等于 -1
        if(dataList[i].indexOf(value) === -1){
            dataList[i] = ""
        }

    }

    ul.innerHTML = " "  // 令之前渲染的数据为空 

     //重新渲染复合条件的数据
    for(let i = 0; i < dataList.length ;i++){

        let li = document.createElement("li")
        li.innerText = dataList[i]
        // li.style.display = "none"
        ul.appendChild(li)
    
    }

}
search()
function myScript(){
    search()
}