纯JS实现人员查询系统 | 无需后端和数据库

写标题就相当于是一个简易的教程，大概告诉他功能。

<h1>查询系统</h1>

h1%20{
%20%20%20%20text-align:%20center;
%20%20%20%20color:%20red;
%20%20%20%20margin-top:%2060px;
}

查询盒子

desc部分是显示区域，将找到的职位或者介绍显示在此地。

<div class="box">
    <input class="word" type="text" placeholder="请输入名字">
    <div class="desc"></div>
</div>

.box {
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: lightblue;
    border: 1px solid #000;
    margin: 100px auto 0;
    border-radius: 20px;
}

.word {
    width: 200px;
    height: 30px;
    font-size: 18px;
    outline: none;
    border: none;
    padding-left: 8px;
    box-sizing: border-box;
    border-radius: 10px;
}

.desc {
    width: 200px;
    height: 150px;
    margin-top: 20px;
    background-color: lightgreen;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

到这里制作是算制作好了

看一下总体效果吧！

差不多差不多，能用就行。

功能

数据

查询肯定是先要有数据，数据使用字符串格式，使用#和换行区分，#是名字，换行是职位或介绍。

格式大概就是这种。

#对应名字，换行就是介绍。

查找

数据有了，现在需要把数据找出来，怎么找呢？

首先把数据进行分割，用换行为条件进行分割。

let arr = word.split("\n");

现在得到的数据是这样的

创建一个Map，用来存放职位名字对应的职位。

let map = new Map();

使用for循环，把#后面的添加进去，再把下一行的职位或者介绍添加进去。

for (let i = 0; i < arr.length - 1; i += 2) {
    map.set(arr[i].substring(1), arr[i + 1]);
}

这样我们的map数据就是这样的格式。

显示

获取输入框和显示区域

let oWord = document.querySelector('.word');
let oDesc = document.querySelector('.desc');

键盘弹起一次，在map里面查找input里输入的字符。

如果找到返回字符对应的值，没有找到则返回“库里没有这个人”

oWord.onkeyup = function() {
    let value = map.get(this.value);
    if (value) {
        oDesc.innerHTML = value;
    } else {
        oDesc.innerHTML = "库里没有这个人";
    }
}

总结

这东西总体来说是非常简单的，可以实现一些没必要用后端的小功能，比如我把我的朋友和同学都录进去了，是不是觉得没必要。其实不然，我们需要收集材料，这种材料那种材料，非常多，所以使用这个可以很好的找到材料需要交给谁。

总体来说还是可以的