搜索功能

  1+++
  2title = "Search"
  3description = "Akvico's Blog"
  4date = "2022-07-14"
  5author = "Akvicor"
  6+++
  7
  8<style>
  9  /* 手机适配 */
 10  @media screen and (max-width: 500px) {
 11     .search{
 12       padding-right: 25px;
 13     }
 14
 15     .search input{
 16       width: 100%;
 17     }
 18
 19     .search button{
 20       display: none;
 21     }
 22  }
 23  /* 电脑适配 */
 24  @media screen and (min-width: 500px) {
 25      .search{
 26        width: 500px;
 27      }
 28
 29      .search input{
 30        width: 444px;
 31      }
 32  }
 33
 34  /* 通用样式 */
 35  .search{
 36    margin: auto;
 37  }
 38
 39  .search input{
 40    outline: none;
 41    border: 2px solid #c05b4d;
 42    height: 32px;
 43    padding: 10px;
 44  }
 45  .search button{
 46    outline: none;
 47    border: 0px;
 48    height: 56px;
 49    width:56px;
 50    position:absolute;
 51    background-color:#c05b4d ;
 52  }
 53  .search .icon{
 54    width: 28px;
 55    height: 28px;
 56  }
 57</style>
 58<div class="search">
 59  <input type="text" placeholder="" id="search-key" />
 60  <button onclick="search()">
 61    <svg t="1583982313567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271"
 62      width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
 63      <defs>
 64        <style type="text/css"></style>
 65      </defs>
 66      <path d="M694.857143 475.428571q0-105.714286-75.142857-180.857142T438.857143 219.428571 258 294.571429 182.857143 475.428571t75.142857 180.857143T438.857143 731.428571t180.857143-75.142857T694.857143 475.428571z m292.571428 475.428572q0 29.714286-21.714285 51.428571t-51.428572 21.714286q-30.857143 0-51.428571-21.714286l-196-195.428571q-102.285714 70.857143-228 70.857143-81.714286 0-156.285714-31.714286t-128.571429-85.714286-85.714286-128.571428T36.571429 475.428571t31.714285-156.285714 85.714286-128.571428 128.571429-85.714286T438.857143 73.142857t156.285714 31.714286 128.571429 85.714286 85.714285 128.571428T841.142857 475.428571q0 125.714286-70.857143 228l196 196q21.142857 21.142857 21.142857 51.428572z"
 67        p-id="1272" fill="#ffffff"></path>
 68    </svg>
 69  </button>
 70</div>
 71<h1 id="search-tip" style="color: #c05b4d;text-align: center;display: none;">Searching ...</h1>
 72<br />
 73<div id="result"></div>
 74
 75<script type="text/javascript">
 76  // enter
 77  window.onload = function() {
 78    document.onkeydown = function(ev) {
 79      var event = ev || event
 80      if (event.keyCode == 13) {
 81        search()
 82      }
 83    }
 84  }
 85
 86  // search
 87  function search() {
 88    key = document.getElementById("search-key").value;
 89    if (key === "") {
 90      return;
 91    }
 92    document.getElementById("search-key").value = "";
 93
 94    // tip
 95    document.getElementById("search-tip").innerText = "Searching ...";
 96    document.getElementById("search-tip").style.display = "block";
 97
 98    // clear
 99    var el = document.getElementById('result');
100    var childs = el.childNodes;
101    for (var i = childs.length - 1; i >= 0; i--) {
102      el.removeChild(childs[i]);
103    }
104
105    // xml
106    xmltext = new XMLHttpRequest;
107    xmltext.open("GET", "/index.xml", false);
108    xmltext.send();
109    resp = xmltext.responseXML;
110    items = resp.getElementsByTagName("item");
111    // search
112    var i = 0;
113    haveResult = false;
114    while (i < items.length) {
115      txt = items[i].getElementsByTagName("title")[0].innerHTML + items[i].getElementsByTagName("description")[0].innerHTML
116      if (txt.indexOf(key) > -1) {
117        haveResult = true;
118        title = items[i].getElementsByTagName("title")[0].innerHTML;
119        link = items[i].getElementsByTagName("link")[0].innerHTML;
120        time = items[i].getElementsByTagName("pubDate")[0].innerHTML;
121        mark = items[i].getElementsByTagName("description")[0].innerHTML;
122        addItem(title, link, time, mark)
123      }
124      i++;
125    }
126    if (!haveResult) {
127      document.getElementById("search-tip").innerText = "NULL";
128      document.getElementById("search-tip").style.display = "block";
129    }
130  }
131
132  // add
133  function addItem(title, link, time, mark) {
134    document.getElementById("search-tip").style.display = "none";
135    tmpl = "<article class=\"post\" style=\"border-bottom: 1px solid #e6e6e6;\" >" +
136      "<header class=\"post-header\">" +
137      "<h1 class=\"post-title\"><a class=\"post-link\" href=\"" + link + "\" target=\"_blank\">" + title + "</a></h1>" +
138      "<div class=\"post-meta\">" +
139      " <span class=\"post-time\">" + time + "</span>" +
140      "</div>" +
141      " </header>" +
142      "<div class=\"post-content\">" +
143      "<div class=\"post-summary\">" + mark + "</div>" +
144      "<div class=\"read-more\">" +
145      "<a href=\"" + link + "\" class=\"read-more-link\" target=\"_blank\">Read more</a>" +
146      "</div>" +
147      " </div>" +
148      "</article>"
149    div = document.createElement("div")
150    div.innerHTML = tmpl;
151    document.getElementById('result').appendChild(div)
152  }
153</script>