【项目】主页搜索 1.0

夕暮落

已于 2022-11-23 10:40:13 修改

阅读量82

点赞数

分类专栏：项目网站文章标签： html

于 2022-11-23 10:39:08 首次发布

本文链接：https://blog.csdn.net/qq_44275554/article/details/127995766

版权

项目同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

网站

1 篇文章 0 订阅

订阅专栏

【项目】主页搜索 1.0

前言

百度等搜索引擎拉夸，各家自己内容自己的搜索比较好，因此需要一款整合软件。本软件可以整合各种搜索引擎。

源码

网页

<html>
<head>

<style>


body{

background:url("./background.webp");
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
} 

h1{
text-align: center;
color: white;
font-size: 4rem;
margin-top: 10vh;
}

.box {
display: flex;
justify-content: center;
align-items:center;
height: 50px;
width: 600px;
border: 1px gray solid;
border-radius: 30px;
overflow: hidden;
margin: 0 auto;
margin-top: 20vh;
background: rgba(255, 255, 255,.9);
}
.icon {
width: 40px;
height: 40px;
margin-left: 10px;
}
.icon img {
height: 40px;
width: auto;
}
.searchInput {

width: 540px;
height: 100%;
margin-left: 5px;
background: none;

}
.searchInput input{

width: 100%;
height: 100%;
outline: none;
border: none;
font-size: 1.5rem;
background: none;
}

</style>

</head>

<body>

<h1>Search</h1>

<div class="box">

<div class="icon">
<img class="searchIcon" src="https://baidu.com/favicon.ico"/>
</div>

<div class="searchInput">
<input type="search" class="searchContent"/>
</div>

</div>

</body>

<script>
    let searchEngine = null
    let searchBy = null
    // 获取本地搜索引擎信息
    window.onload = function () {
        var url = "searchEngine.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
        var request = new XMLHttpRequest();
        request.open("get", url);/*设置请求方法与路径*/
        request.send(null);/*不发送数据到服务器*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                searchEngine = JSON.parse(request.responseText);
                console.log(searchEngine);
            } else {
                alert("无法读取本地搜索引擎数据")
            }
        }
    }


    const content = document.querySelector(".searchContent")
    const icon = document.querySelector(".searchIcon")
content.oninput   = function() {
    let value = this.value

}
content.addEventListener("keyup", function (e) {
    console.log(e)
    if (e.key == "Enter") {
        let searchUrl = null;
        let words = content.value.split(" ")
        if (words.length > 1) {
            let key = words[0]
            searchBy = searchForEngine(key);
            delete words[0];
            if (searchBy) {
                searchUrl = searchBy.url.replace("%s",content.value.replace(key+" ",""))
            } 
        } else {
            searchUrl = "https://www.baidu.com/s?wd=" + content.value
        }
        console.log(searchUrl)
        location.href(searchUrl)
    }

    if (e.key == " ") {
        let key = content.value.split(" ")[0]
        if (key != null) {
            searchBy = searchForEngine(key);
            if (searchBy != null) {
                icon.setAttribute("src", searchBy.icon)
            } else {
                icon.style.src = "https://baidu.com/favicon.ico"
                icon.setAttribute("src", "https://baidu.com/favicon.ico")
            }
        }
    }

})

/**
* 查询是否为特殊搜索引擎
*/
function searchForEngine(key) {
    let result = null

    if (searchEngine) {
        /*searchEngine.engines.forEach(function (value, index) {
            console.log(value)
            if (value.key.indexOf(key) != -1) {
                console.log("找到")
            }
        })*/
        const engines = searchEngine.engines;
        for (let i = 0; i < engines.length; i++) {
            if (engines[i].key.indexOf(key) != -1) {
                result = engines[i]
                break;
            }
        }

    }
    if (result) {
        console.log("找到")
    } else {
        console.log("未找到")
    }

    return result
}

</script>

</html>


{
"engines": [
    {
        "name": "Baidu",
        "icon": "https://baidu.com/favicon.ico",
        "url": "https://www.baidu.com/s?wd=%s",
        "key": [ "baidu", "bd" ]
    },
    {
        "name": "Bing",
        "icon": "https://cn.bing.com/favicon.ico",
        "url": "https://cn.bing.com/search?q=%s",
        "key": [ "bing", "bi" ]
    },
    {
        "name": "CSDN",
        "icon": "https://so.csdn.net/favicon.ico",
        "url": "https://so.csdn.net/so/search?q=%s",
        "key": [ "csdn" ]
    },
    {
        "name": "博客园",
        "icon": "https://www.cnblogs.com/favicon.ico",
        "url": "https://zzk.cnblogs.com/s?w=%s",
        "key": [ "bky","cnb"]
    }

]
}

使用教程

搜索
输入关键词+空格即可切换搜索引擎，使用回车开始搜索
添加搜索引擎
- 搜索链接（url）：可以使用个网站搜索test，之后将test换位%s即可
- 图标（icon）：将网站顶级域名+favicon.ico即可获取大部分网站的图标
- 关键词（key）：在key中使用数组添加，不要重复！
日常使用
- 方法一：可以将网站放在本地使用浏览器打开，将链接设为新建标签页或主页
- 方法二：将网页部署到服务器，将网站设为主页