fix(search): custom clear button, fixed #271

src/plugins/search/component.js

@@ -14,6 +14,11 @@ function style () {
   border-bottom: 1px solid #eee;
 }
 
+.search .input-wrap {
+  display: flex;
+  align-items: center;
+}
+
 .search .results-panel {
   display: none;
 }
@@ -26,13 +31,31 @@ function style () {
   outline: none;
   border: none;
   width: 100%;
-  padding: 7px;
-  line-height: 22px;
+  padding: 0 7px;
+  line-height: 36px;
   font-size: 14px;
+}
+
+.search input::-webkit-search-decoration,
+.search input::-webkit-search-cancel-button,
+.search input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
+.search .clear-button {
+  width: 36px;
+  text-align: right;
+  display: none;
+}
+
+.search .clear-button.show {
+  display: block;
+}
+
+.search .clear-button svg {
+  transform: scale(.5);
+}
 
 .search h2 {
   font-size: 17px;
@@ -70,9 +93,18 @@ function style () {
 
 function tpl (opts, defaultValue = '') {
   const html =
-    `<input type="search" value="${defaultValue}" />` +
-    '<div class="results-panel"></div>' +
-    '</div>'
+    `<div class="input-wrap">
+      <input type="search" value="${defaultValue}" />
+      <div class="clear-button">
+        <svg width="26" height="24">
+          <circle cx="12" cy="12" r="11" fill="#ccc" />
+          <path stroke="white" stroke-width="2" d="M8.25,8.25,15.75,15.75" />
+          <path stroke="white" stroke-width="2"d="M8.25,15.75,15.75,8.25" />
+        </svg>
+      </div>
+    </div>
+    <div class="results-panel"></div>
+    </div>`
   const el = Docsify.dom.create('div', html)
   const aside = Docsify.dom.find('aside')
 
@@ -83,9 +115,11 @@ function tpl (opts, defaultValue = '') {
 function doSearch (value) {
   const $search = Docsify.dom.find('div.search')
   const $panel = Docsify.dom.find($search, '.results-panel')
+  const $clearBtn = Docsify.dom.find($search, '.clear-button')
 
   if (!value) {
     $panel.classList.remove('show')
+    $clearBtn.classList.remove('show')
     $panel.innerHTML = ''
     return
   }
@@ -94,7 +128,7 @@ function doSearch (value) {
   let html = ''
   matchs.forEach(post => {
     html += `<div class="matching-post">
-<a href="${post.url}">    
+<a href="${post.url}">
 <h2>${post.title}</h2>
 <p>${post.content}</p>
 </a>
@@ -102,12 +136,14 @@ function doSearch (value) {
   })
 
   $panel.classList.add('show')
+  $clearBtn.classList.add('show')
   $panel.innerHTML = html || `<p class="empty">${NO_DATA_TEXT}</p>`
 }
 
 function bindEvents () {
   const $search = Docsify.dom.find('div.search')
   const $input = Docsify.dom.find($search, 'input')
+  const $inputWrap = Docsify.dom.find($search, '.input-wrap')
 
   let timeId
   // Prevent to Fold sidebar
@@ -120,6 +156,13 @@ function bindEvents () {
     clearTimeout(timeId)
     timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
   })
+  Docsify.dom.on($inputWrap, 'click', e => {
+    // click input outside
+    if (e.target.tagName !== 'INPUT') {
+      $input.value = ''
+      doSearch()
+    }
+  })
 }
 
 function updatePlaceholder (text, path) {

src/themes/basic/_layout.css

@@ -102,7 +102,6 @@ li input[type=checkbox] {
 
 /* navbar */
 .app-nav {
-  left: 0;
   margin: 25px 60px 0 0;
   position: absolute;
   right: 0;