<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <script type="text/javascript">
        window.$crisp = [];
        window.CRISP_WEBSITE_ID = "09b39e43-0b7f-4b82-b6fd-2d1fa1d59244";
        (function() {
            d = document;
            s = d.createElement("script");
            s.src = "https://client.crisp.chat/l.js";
            s.async = 1;
            d.getElementsByTagName("head")[0].appendChild(s);
        })();
    </script>
    <title>青荇搜索 - 快速，简洁，无痕</title>
    <link rel="shortcut icon" type="image/png" href="https://i.loli.net/2021/02/10/lFnaXCt7QmxrML4.png">
    <!-- <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900" rel="stylesheet" /> -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            line-height: 0px;
        }
    </style>
    <!-- <link href="https://cdn.jsdelivr.net/gh/ncmake/Verdant_Static_Resources@v0.0.1/css/search_index.css" rel="stylesheet" /> -->
    <link href="css/search_index.css" rel="stylesheet" />
</head>

<body>
    <div id="app" style="position: relative;padding-bottom: 0;height: 100%;min-height: 600px;">
        <div class="index-box">
            <div style="display: table;margin: 0 auto;padding: 8px;margin-bottom: 24px;">
                <img style="height:72px" src="https://i.loli.net/2021/02/10/XykcnF63HPstNw4.png" />
            </div>
            <div class="search-input-w-box">
                <div class="search-input-w-box-left">
                    <span style="width: 100%;display: inline-block;">
						<input id="input_form_k" type="text" placeholder="" maxlength="255" autocomplete="off"/>
                    </span>
                </div>
                <span class="form-button-box">
                    <input class="form-button" id="start_search" type="button" value="搜索"/>
                </span>
                <center>
                    <p id="attention1"></p>
                </center>
                <div id="search_associate">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <!-- https://i.loli.net/2021/02/02/48U9aOFPwejLNTn.jpg -->
        <!-- -->
        <div class="form-focus" id="form_focus" data-bm="24" style="background-image: url('/img/bg1.jpg')"></div>
    </div>
</body>
<script>
    var timer = null;
    var rkey = [];
    var inputi = {
        focus: false,
        now: -1
    }

    document.getElementById('input_form_k').addEventListener('focusin', function() {
        document.getElementById('form_focus').style.filter = "brightness(0.75)";
        document.getElementById('search_associate').style.display = "block";
        inputi.focus = true;

        SelectAssociate(inputi.now, true);
    });

    document.getElementById('form_focus').addEventListener("click", function() {
        document.getElementById('form_focus').style.filter = "brightness(1)";
        document.getElementById('search_associate').style.display = "none";
        inputi.focus = false;
        inputi.now = -1;
        SelectAssociate(inputi.now, true);
    });

    function gourl() {
        location.href = "searchlist" + "?keyword=" + encodeURIComponent(document.getElementById("input_form_k").value);
    };

    function hrefg(index) {
        document.getElementById("input_form_k").value = rkey[index];
        setTimeout(gourl, 30);
    };

    document.getElementById('start_search').addEventListener("click", function() {
        gourl();
    });

    document.getElementById('input_form_k').addEventListener("keyup", function(e) {
        let tp = document.getElementById("input_form_k").value;
        if (e.key == "Enter") {
            gourl();
        }
        //输入间隔
        if (e.key.indexOf("Arrow") == -1 && tp.length > 0) {
            //console.log('timer ok')
            clearTimeout(timer)
            timer = setTimeout(() => {
                let tmp_2 = encodeURIComponent(document.getElementById("input_form_k").value);
                let xhr = null;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.open('GET', '/keyword_think?keyword=' + tmp_2, true);
                xhr.onload = function() {
                    let dt = JSON.parse(xhr.response);
                    let elm = document.querySelector("#search_associate ul")
                    elm.innerHTML = "";
                    for (let i = 0; i < dt.length; i++) {
                        let fx = document.createElement("li");
                        fx.addEventListener("click", function() {
                            hrefg(i);
                        });
                        fx.addEventListener("mouseenter", function() {
                            inputi.now = i;
                            SelectAssociate(i, false);
                        });
                        fx.innerText = dt[i];
                        elm.appendChild(fx);
                    }
                    inputi.now = -1;
                    SelectAssociate(inputi.now, true);
                    rkey = dt;
                    timer = null;
                }
                xhr.send();
            }, 500);
        }
    });

    document.getElementById('start_search').addEventListener("click", function() {
        gourl();
    });

    document.addEventListener("keyup", function(e) {
        let keys = e.key;
        if (keys.indexOf("Arrow") != -1) {
            if (keys == "ArrowDown") {
                if (inputi.now + 1 < rkey.length) {
                    inputi.now = inputi.now + 1;
                }
            } else {
                if (inputi.now - 1 > -1) {
                    inputi.now = inputi.now - 1;
                }
            }
            SelectAssociate(inputi.now, true);
        }
    });

    function SelectAssociate(i, u) {
        let elm = document.querySelectorAll("#search_associate ul li");
        if (i == -1) {
            for (let index = 0; index < elm.length; index++) {
                let element = elm[index];
                if (element.classList.contains("search-associate-select")) {
                    element.classList.remove("search-associate-select");
                }
            }
        } else {
            for (let index = 0; index < elm.length; index++) {
                let element = elm[index];
                if (index == i) {
                    if (!element.classList.contains("search-associate-select")) {
                        element.classList.add("search-associate-select");
                    }
                    if (u) {
                        document.getElementById("input_form_k").value = rkey[i];
                    }
                } else {
                    if (element.classList.contains("search-associate-select")) {
                        element.classList.remove("search-associate-select");
                    }
                }
            }
        }
    }
</script>

</html>