This is the 8th day of my participation in the First Challenge 2022

Why do we do this little case?

First of all, I have extremely severe obsessive-compulsive disorder, and I pursue the interface of the device as clean as possible. In addition, due to my professional reasons, I need to constantly search various cross-platform materials, so I made a search bar that combines Baidu, Bing, Yandex, Gold digging and CSDN.

Take a look at baidu’s search page

Baidu is good, and some search engines open all ads and pop-ups, such as QQ browser…

In order to give myself a clean interface and improve search efficiency, I made one myself (below).

I know a lot of guys have done this, but this one is purely web based, doesn’t require installation, and doesn’t have a lot of bells and whistles (it’s lighter)

Realize the principle of

Window. Location. Href

1. How to submit the input to the specified platform

Take Baidu for example: when we search for “hello”

Address bar Address: www.baidu.com/s?wd= Hello

HTTPS is the communication protocol

www.baidu.com is the website (domain name)

What’s the next s? What does wd= Hello mean? We might as well change the browser address to www.baidu.com/s?wd= world

Originally, the character after wd= corresponds to the content we need to search, so I can use JS to get the content of the search bar, make a splice, and then use JS to jump to the spliced link page, so that I can make a search bar with search function in reality.

2. Find patterns

With the above theoretical basis, I tried the search methods on various platforms and found that their implementation methods are similar to Baidu’s, but the specific implementation methods are different as follows

platform The domain name Search field
baidu www.baidu.com/s ? wd=
bing cn.bing.com/search ? q=
Jane’s book www.jianshu.com/search ? q=
CSDN so.csdn.net/so/search ? q=
Love to the net www.aigei.com/s ? q=

Other platforms (see figure)

Write code

I think both the HTML and JS code for this case are important, so I focus on sharing these two files

<! DOCTYPEhtml>
<html lang="cn">
<! -- The following js implementation is to determine whether the user is using mobile terminal, if it is mobile terminal jump to the mobile HTML page -->
<script>
    if (window.navigator.userAgent.match(/Android|iPhone|iPad/)) {
        window.location.href = 'm.index.html';
    } else {
        console.log('PC');
    }
</script>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>QHX- Aggregate search</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="imgbox">
        <img src="./images/2022.png" alt="">
    </div>
    <div id="data">
        <select name="" id="">
        <! -- I put the domain name and search keyword of each platform in the value drop-down box, which is convenient for later JS to get, and must add the default status of a platform -->
        <option value="https://www.baidu.com/s" selected>baidu</option>
        <option value="https://cn.bing.com/search">BING</option>
        <option value="https://yandex.com/search/">Yandex</option>
        <option value="https://juejin.cn/search">The Denver nuggets</option>
        <option value="https://zzk.cnblogs.com/s">Blog garden</option>
        <option value="https://www.jianshu.com/search">Jane's book</option>
        <option value="https://so.csdn.net/so/search">CSDN</option>
        <option value="https://www.51yuansu.com/index.php">Find the element</option>
        <option value="https://www.aigei.com/s">Love gives the net material</option>
        <option value="https://search.bilibili.com/all">B station</option>
        <option value="https://www.haiantv.cc/word">Film and television one key search</option>
    </select>
        <input type="text" name="" id="text">
        <button class="label" type="button">search</button>
    </div>
    <! -- Implement js -->
    <script src="./js/index.js"></script>
</body>
</html>
Copy the code
// Get the search button
const btn = document.querySelector('.label');
// Get the drop-down box to determine the search platform selected by the user
const point = document.querySelector('select');
// Get the input box
const texts = document.querySelector('#text');

// Put the search keyword end of all platforms into an array
const arr = ['wd'.'q'.'text'.'query'.'w'.'keyword'.'m=Index&a=fenlei&k'];

// What to do when the search button is clicked
btn.onclick = function() {
    // Get the content selected by the user in the drop-down box
    const p = point.value;
    // Get input box, user input into the content
    const text = texts.value;
    // Declare an empty string
    let str = ' ';
    
    // All of the following if statements are used to determine whether the dropdown box contains the platform domain name keyword, and if so
    if (p.includes('baidu')) {
        // Select * from *; + Search key field + '=' + user search content
        // If this is Baidu, what is the result of the concatenation? Wd = how are you
        str = '? ' + arr[0] + '=' + text;
    }
    if (p.includes('bing')) {
        str = '? ' + arr[1] + '=' + text;
    }
    if (p.includes('yandex')) {
        str = '? ' + arr[2] + '=' + text;
    }
    if (p.includes('juejin')) {
        str = '? ' + arr[3] + '=' + text;
    }
    if (p.includes('cnblogs')) {
        str = '? ' + arr[4] + '=' + text;
    }
    if (p.includes('jianshu')) {
        str = '? ' + arr[1] + '=' + text;
    }
    if (p.includes('csdn')) {
        str = '? ' + arr[1] + '=' + text;
    }
    if (p.includes('yuansu')) {
        str = '? ' + arr[6] + '=' + text;
    }
    if (p.includes('aigei')) {
        str = '? ' + arr[1] + '=' + text;
    }
    if (p.includes('bilibili')) {
        str = '? ' + arr[5] + '=' + text;
    }
    if (p.includes('haiantv')) {
        str = '/' + text + '/';
        alert('This search is slow, please be patient');
    }
    console.log(p + str);
    
    // Finally we use the page jump, jump to the specified platform domain name + search field, can be done
    window.location.href = p + str;
}

// Here is to determine whether the user selected to find elements, if so, will prompt the user, need to input pinyin search
point.onchange = function() {
    const p = point.value;
    if (p.includes('yuansu')) {
        texts.setAttribute('placeholder'.'Search elements please input pinyin, such as: Hello input nihao'); }}// Make the search button simulate being clicked when the user clicks Enter
document.onkeyup = function(e) {
    if (e.keyCode == 13) { btn.click(); }}// If it is a PC, start the background switch
if (window.navigator.userAgent.match(/Windows/)) {
    document.body.background
    let index = 1;
    setInterval(() = > {
        index++;
        if (index > 5) {
            index = 1;
            document.body.style.background = `url(.. /images/beijing${index}.jpg)no-repeat center center/100% 100%`;
        } else {
            document.body.style.background = `url(.. /images/beijing${index}.jpg)no-repeat center center/100% 100%`; }},10000);
}
Copy the code

4. Recommend it to everyone

Well, this is a simple aggregative search interface I made, I feel very convenient, cross-platform search no longer need to jump to the platform inside, and then go to search. If you have the need, you can refer to my idea to do a personalized search home page, if you have limited time, you can also use my page as a browser home page.

Home page setting link www.starqin920.cn/search/inde…

Setting procedure: Chrome is used as an example