Merge pull request #54 from kkn1125/oho-update-4

search bar 검색어 출력 수정

dist/assets/css/gnb.css

@@ -44,11 +44,38 @@
 .search-container button {
   float: right;
   padding: 6px 10px;
-  /* background: #ddd; */
   font-size: 17px;
   border: 1px solid black;
   cursor: pointer;
 }
+
+#search-bar {
+  position: relative;
+}
+
+#search-result {
+  position: absolute;
+  width: 100%;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: block;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  z-index: 1;
+}
+
+.dropdown-content:hover {
+  background-color: #d8f9da;
+}
+
 /* 검색창 end */
 /* global-nav-bar end */
 

dist/assets/js/theme.js

@@ -321,4 +321,49 @@ function floatWarning(type) {
         }, 5000);
     });
 }
-// 채팅 modal end
+// 채팅 modal end
+
+// 검색창 start
+const keywords = ['information', 'documentify', 'controller', 'info']; // 메서드이름
+
+(function getTitle() {
+    let getTitles = document.getElementsByClassName('h3 text-dark'); // 정확하게 id로 받아오도록 수정하기!
+
+    window.titles = [];
+    for(let i = 0; i < getTitles.length; i++) {
+        let title = getTitles[i].innerText;
+        titles.push(title);
+    }
+
+})();
+
+document.addEventListener('keyup', resultHandler);
+
+function resultHandler(ev) {
+    let target = ev.target;
+    if (!(target.tagName == 'INPUT' && target.name == 'search')) return; // 클릭은 요기
+    let inputValue = ev.target.value; // input창에 입력한 값(String)
+    let idx = 0;
+    let result = document.getElementById('search-result'); // 들어가는 결과값은 요기
+    result.innerHTML = '';
+
+// 다른 곳 클릭하면 드롭다운 닫히기
+    titles.forEach(function (keyword) {
+        let okay = keyword.indexOf(inputValue); // keywords의 각 value마다 일치하는 인덱스 반환
+        console.log(okay);
+        if (okay != -1 && inputValue != '') {
+            console.log(`keyword: ${keyword}`);
+            console.log(keywords[idx]);
+
+            result.innerHTML += 
+            `<div class="dropdown-content">
+                <span>${keyword.slice(0, okay)}</span>
+                <mark>${inputValue}</mark>
+                <span>${keyword.slice(okay+inputValue.length, keyword.length)}</span>
+            </div>`;
+        }
+        idx++;
+    });
+
+}
+// 검색창 end

dist/include/global_nav_bar.html

@@ -2,8 +2,9 @@
     <div class="file_name">
         <h1>{@docuPack.file.name.split('/').pop().split('').map((x,i)=>i==0?x.toUpperCase():x).join('')@}</h1>
     </div>
-    <div class="search-container">
-            <input type="text" placeholder="search" name="search">
+    <div class="search-container dropdown" id="search-bar">
+        <input type="text" placeholder="search" name="search">
             <button id="saveas" class="saveas" type="submit"><i class="fa fa-search"></i></button>
+            <div id="search-result"></div>
     </div>
 </div>