仿文献高级检索多关键词查询的网页实现

最新推荐文章于 2024-08-13 08:48:35 发布

Dr.F.Arthur

最新推荐文章于 2024-08-13 08:48:35 发布

阅读量843

点赞数 3

分类专栏：有趣的东西文章标签： javascript html

本文链接：https://blog.csdn.net/qq_56051596/article/details/124787229

版权

有趣的东西专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了一位前端开发者在实现课题项目时遇到的问题，即如何创建一个类似知网和WebOfScience文献检索网站的多关键词输入检索功能。作者通过简化页面元素，展示了创建一个简单的关键词输入框的过程，包括HTML结构和JavaScript代码实现添加和删除输入框的功能。代码中限制了最多可输入5个关键词，并提供了提交按钮。这个功能对于需要用户输入多个搜索词的前端应用具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本蒟蒻最近做课题的前端开发，然后遇到这样一类的网页需求，但是我在网上没有找到对应的制作讲解文章：当要求用户提交多个关键词来共同检索时需要实现一种类似知网(对，那个万恶的东西！)、Web Of Science那些文献检索网站，就会要做到这样的页面：

或者这样的：

因为我需要做的内容不需要前面的主题这样的选项栏目，所以就简化了，做出来的效果如下(没有加什么CSS，本蒟蒻美工不行)：

具体的代码如下：

/*html部分*/
/*为了方便看，我至今将CSS内容放在里面了
这样在实际开发中不可取，不规范*/
<div class="grade-search-content">
    <div>
        <h1 style="position:relative;top:10px;left:400px;font-weight:bold;">请您输入您需要检索的化合物组合</h1>
    </div>
    <div class="search-mainbox">
        <div class="input_place" style="position:relative;top:10px;bow-shadow:0 8px 16px 0 rgba(0,0,0,0.2);">
            <dl id="gradetxt" class="inputs-list" data-seq="13" data-maxlen="10">
                <dt>
                    <a class="add-group" href="javascript:void(0)" style="position:absolute; right:280px; bottom:16px; width:26px; z-index:2;height:26px;font-size: 26px;text-align: center; color:#bcbcbc; font-weight:bold;"href="javascript:void(0);">+</a>
                    </dt>
                <a class="del-group" style="position:absolute; right:320px; bottom:20px; width:26px; z-index:2;height:26px; font-size:34px; text-align:center; color:#bcbcbc; font-weight:bold; " href="javascript:void(0)">-</a>
            </dl>
            <dd>
                <input type="text" style="width:650px;height:calc(1.5em + 1.5rem +2px);;left:250px;position:relative;" placeholder="Plesase add a compound">
            </dd>
        </div>
    </div>
    <div>
/*注意，这里实现的放大镜的图标实际上是一个css插件实现的，
他们官网上有代码实现，可以自行操作，
官网地址http://www.fontawesome.com.cn/faicons/*/
        <button type="button" style="position:relative;left:480px;top:50px;width:120px;height:40px;-webkit-box-shadow: 0 2px 6px 0 rgba(136, 106, 181, 0.5);box-shadow: 0 2px 6px 0 rgba(136, 106, 181, 0.5);background-color:#544b7e;"><i class="fal fa-search mr-lg-2" style="color:white;"></i><span class="hidden-md-down" style="color:white;">Submit</span></button>
    </div>
</div>

window.addEventListener('load', function () {
    var addoption = document.querySelector('.add-group');
// 获取并定义“+”号
    var deloption = document.querySelector('.del-group');
// 获取并定义“-”号
    var input_place = document.querySelector('.input_place');
// 得到存放输入栏的大盒子
    var childs = input_place.childNodes;
// 获取这个大盒子的子节点
    var count = 0;
// 定义点击加减的次数，但是这里有值得注意的点
// 下面是定义“+”的功能的函数
    addoption.addEventListener('click', function () {
        count = count + 1;
        // 既然点击了“+”，那么次数加1很合理
        if (count < 5) {
        // 这个地方我设定了最多不能超过5个栏目
            var input = document.createElement('input');
            // 创建一个输入栏
            input.style = "width:650px;height:calc(1.5em + 1.5rem + 2px);;left:250px;position:relative;"
            // 给输入栏设定风格，也可以是给输入栏设置一个类，然后和外置的css对接
            input.type = "text";
            // 类型是输入文本
            input.placeholder = "Plesase add a compound"
            // 文本内默认文字提示
            var dd = document.createElement('dd');
            // 创建<dd>标签
            dd.appendChild(input);
            // 将输入栏存入dd中作为子元素
            input_place.appendChild(dd);
            // 将dd存入大盒子中作为子元素
            console.log(count);// 这个是控制台看效果的，可以删去
        } else {
            count = count - 1;
            // 注意！这一步的意思是：如果已经到达我设定的上限，
            // count就不再增加，因为这里我是把它当索引用的
        }
    })
// 下面定义的删除按钮就是和上面差不多了
    deloption.addEventListener('click', function () {
        count = count - 1;
        if (count >= 0) {
            input_place.removeChild(childs[childs.length - 1]);
            console.log(count);
        } else {
            count = count + 1;
        }
    })
})