스킨 검색 미리보기 Beta

app.py

@@ -587,6 +587,10 @@ def api_user_info(name = ''):
 @app.route('/api/topic/<everything:name>/sub/<sub>')
 def api_topic_sub(name = '', sub = '', time = ''):
     return api_topic_sub_2(conn, name, sub, time)
+
+@app.route('/api/search/<name>')
+def api_search(name = ''):
+    return api_search_2(conn, name)
     
 # File
 @app.route('/views/easter_egg.html')

route/api_search.py

@@ -0,0 +1,23 @@
+from .tool.func import *
+
+def api_search_2(conn, name):
+    curs = conn.cursor()
+
+    num = int(number_check(flask.request.args.get('num', '1')))
+    if not num > 0:
+        num = 1
+
+    if num > 1000:
+        num = 1
+
+    curs.execute("" + \
+        "select distinct title, case when title like ? then 'title' else 'data' " + \
+        "end from data where title like ? or data like ? order by case " + \
+        "when title like ? then 1 else 2 end limit ?",
+        ['%' + name + '%', '%' + name + '%', '%' + name + '%', '%' + name + '%', str(num)]
+    )
+    all_list = curs.fetchall()
+    if all_list:
+        return flask.jsonify(all_list)
+    else:
+        return flask.jsonify({})

route/search_deep.py

@@ -34,7 +34,7 @@ def search_deep_2(conn, name):
             '''
 
     curs.execute("" + \
-        "select distinct title, case when title like ? then '제목' else '내용' " + \
+        "select distinct title, case when title like ? then 'title' else 'data' " + \
         "end from data where title like ? or data like ? order by case " + \
         "when title like ? then 1 else 2 end limit ?, '50'",
         ['%' + name + '%', '%' + name + '%', '%' + name + '%', '%' + name + '%', str(sql_num)]

views/main_css/js/load_include.js

@@ -8,8 +8,8 @@ function load_include(title, name, p_data) {
     xhr.send(null);
 
     xhr.onreadystatechange = function() {
-        if(xhr.readyState === 4 && xhr.status === 200) {
-            var o_p_data = JSON.parse(xhr.responseText);
+        if(this.readyState === 4 && this.status === 200) {
+            var o_p_data = JSON.parse(this.responseText);
             var g_data = o_p_data['data'];
             
             for(key in p_data) {

views/neo_yousoro/css/main.css

@@ -242,11 +242,25 @@ h6 {
 }
 
 #search_input {
-    width: 80%;
-    border: 1px solid #4a4a4a;
+    width: 220px;
     border-radius: 10px;
 }
 
+div#pre_search {
+    padding: 10px;
+    border: 2px solid #4a4a4a;
+    width: 200px;
+    color: black;
+    margin-top: 5px;
+    background: white;
+    border-radius: 10px;
+    position: absolute;
+}
+
+div#pre_search a {
+    color: dodgerblue;
+}
+
 #search button {
     padding: 0;
     border: none;

views/neo_yousoro/index.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="/views/neo_yousoro/css/main.css?ver=3">
         <script src="/views/neo_yousoro/js/main.js?ver=1"></script>
         <script src="/views/neo_yousoro/js/skin_set.js?ver=1"></script>
+        <script src="/views/neo_yousoro/js/search.js?ver=1"></script>
         <link   rel="stylesheet"
                 href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
                 integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
@@ -91,6 +92,7 @@
                             <button type="submit" formaction="/goto"><i class="fas fa-sign-in-alt"></i></button>
                             |
                             <button type="submit" formaction="/search"><i class="fas fa-search"></i></button>
+                            <div id="pre_search" style="display: none;"></div>
                         </form>
                     </div>
                     <div id="top_tool_mobile" class="is_mobile">

views/neo_yousoro/js/search.js

@@ -0,0 +1,34 @@
+window.onload = function () {
+    var before = '';
+    setInterval(function() {
+        var data = document.getElementById("search_input").value;
+        if(before !== data && data !== '') {
+            before = data;
+            var url = "/api/search/" + encodeURI(data) + "?num=10";
+        
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.send(null);
+            
+            xhr.onreadystatechange = function() {
+                if(this.readyState === 4 && this.status === 200) {
+                    document.getElementById("pre_search").style.display = 'block';
+
+                    var get_data = JSON.parse(this.responseText);
+                    document.getElementById("pre_search").innerHTML = '';
+
+                    if(this.responseText !== "{}\n") {
+                        for(key in get_data) {
+                            document.getElementById("pre_search").innerHTML += '<a href="/w/' + encodeURI(get_data[key][0]) + '">' + get_data[key][0] + '</a><br>';
+                        }
+                    } else {
+                        document.getElementById("pre_search").style.display = 'none';
+                    }
+                }
+            }
+        } else if(before !== data && data === '') {
+            before = '';
+            document.getElementById("pre_search").style.display = 'none';
+        }
+    }, 1000);
+}