xunsearch.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. {layout name="common/layout" /}
  2. <style>
  3. html, body {
  4. }
  5. .form-search label {
  6. font-weight: normal;
  7. margin-right: 5px;
  8. }
  9. .result-list {
  10. margin: 0;
  11. }
  12. .result-list dd {
  13. margin-bottom: 20px;
  14. /*border-bottom:1px solid #f3f3f3;*/
  15. }
  16. .result-list dd:last-child {
  17. margin-bottom: 0;
  18. }
  19. .result-list dd .description {
  20. font-size: 14px;
  21. color: #666;
  22. line-height: 24px;
  23. }
  24. .result-list dd .extra, .result-list dd a {
  25. font-size: 13px;
  26. color: green;
  27. margin-top: 5px;
  28. }
  29. .result-list dd .extra span {
  30. margin-right: 5px;
  31. }
  32. .result-list dd .extra strong {
  33. font-weight: 400;
  34. margin-right: 1px;
  35. }
  36. .result-list h4 {
  37. font-weight: 400;
  38. font-size: 16px;
  39. margin-bottom: 3px;
  40. line-height: 1.54;
  41. }
  42. .result-list em {
  43. color: #c00;
  44. font-style: normal;
  45. }
  46. .result-list . field-info {
  47. }
  48. .search-suggestion {
  49. background-color: #F5F5F5;
  50. padding: 10px;
  51. margin-bottom: 15px;
  52. }
  53. .search-links {
  54. margin-top: 25px;
  55. }
  56. .search-links a {
  57. margin-right: 5px;
  58. }
  59. .autocomplete-searchmenu .autocomplete-suggestion {
  60. padding: 5px 12px;
  61. }
  62. </style>
  63. <div class="container">
  64. <div class="row">
  65. <div class="col-xs-12">
  66. <div class="panel panel-default">
  67. <div class="panel-body">
  68. <div class="p-3">
  69. <form class="form-search pt-2" id="search-form" method="get">
  70. <input type="hidden" name="order" value="{$order|htmlentities}">
  71. <div class="row">
  72. <div class="col-xs-12 col-sm-6" id="q-input">
  73. <div class="input-group">
  74. <input type="search" class="search-query form-control" name="q" title="输入任意关键词皆可搜索" value="<?php echo htmlspecialchars($q); ?>">
  75. <span class="input-group-btn">
  76. <button class="btn btn-primary ml-2" type="submit" style="border-radius:2px;padding:6px 30px;">搜索</button>
  77. </span>
  78. </div>
  79. </div>
  80. <div class="col-xs-12 mt-2">
  81. <label><input type="radio" name="fulltext" value="0" {:$fulltext?'':'checked'} /> 标题</label>
  82. <label>
  83. <input type="radio" name="fulltext" value="1" {:$fulltext?'checked':''} /> 全文
  84. </label>
  85. <label>
  86. <input type="checkbox" name="fuzzy" value="1" {:$fuzzy?'checked':''} /> 模糊搜索
  87. </label>
  88. {if false}
  89. <label>
  90. <input type="checkbox" name="synonyms" value="1" {:$synonyms?'checked':''} /> 同义词
  91. </label>
  92. {/if}
  93. <span class="dropdown">
  94. <span class="dropdown-toggle" data-toggle="dropdown" href="javascript:">
  95. {:isset($orderList[$order])?$orderList[$order]:$orderList['relevance']} <span class="caret"></span>
  96. </span>
  97. <ul class="dropdown-menu orderlist">
  98. {foreach name="orderList" id="item"}
  99. <li role="presentation"><a role="menuitem" tabindex="-1" data-value="{$key}" href="javascript:">{$item|htmlentities}</a></li>
  100. {/foreach}
  101. </ul>
  102. </span>
  103. </div>
  104. </div>
  105. </form>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="container">
  113. <div class="row">
  114. <div class="col-xs-12">
  115. <div class="panel panel-default">
  116. <div class="panel-body">
  117. <!-- 开始搜索 -->
  118. <?php if (!empty($q)): ?>
  119. <div class="">
  120. <div class="span12">
  121. <!-- 搜索状态 -->
  122. <p class="result text-muted">为您找到约 <?php echo number_format($count); ?> 条结果,搜索耗时:<?php printf('%.4f', $search_cost); ?>秒</p>
  123. <!-- 搜索建议 -->
  124. <?php if (count($corrected) > 0): ?>
  125. <div class="search-suggestion">
  126. 您是不是要找:
  127. <?php foreach ($corrected as $word): ?>
  128. <span><a href="<?php echo '?q=' . urlencode($word); ?>" class="text-danger"><?php echo htmlentities($word); ?></a></span>
  129. <?php endforeach; ?>
  130. </div>
  131. <?php endif; ?>
  132. <!-- 未找到结果 -->
  133. <?php if ($count === 0 && empty($error)): ?>
  134. <div class="search-not-found">
  135. <p>找不到和 {$q|htmlspecialchars} 相符的内容或信息。</p>
  136. <p>建议您:</p>
  137. <ul class="list-unstyled">
  138. <li>1.请检查输入字词有无错误。</li>
  139. <li>2.请换用另外的查询字词。</li>
  140. <li>3.请改用较短、较为常见的字词。</li>
  141. </ul>
  142. </div>
  143. <?php endif; ?>
  144. <!-- 查询结果 -->
  145. <dl class="result-list">
  146. <?php foreach ($docs as $doc): ?>
  147. <dt>
  148. <h4>
  149. <a href="{$doc['url']}" class="primary-link" target="_blank">
  150. <?php echo $highlight(htmlspecialchars($doc['title'])); ?>
  151. </a>
  152. </h4>
  153. </dt>
  154. <dd>
  155. <div class="description"><?php echo $fulltext ? $highlight(htmlspecialchars($doc['content'])) : htmlspecialchars($doc['content']); ?></div>
  156. <div class="extra">
  157. {if $doc['type']=="question"}
  158. <span class="tag tag-xs">问题</span>
  159. <span><strong>发布于</strong>{$doc.createtime|human_date}</span>
  160. <span>{$doc['comments']} 人回答</span>
  161. {elseif $doc['type']=="article" /}
  162. <span class="tag tag-xs tag-danger">文章</span>
  163. <span><strong>发布于</strong>{$doc.createtime|human_date}</span>
  164. <span>{$doc['views']} 次浏览</span>
  165. <span>{$doc['comments']} 次评论</span>
  166. {/if}
  167. </div>
  168. </dd>
  169. <?php endforeach; ?>
  170. </dl>
  171. <!-- 分页 -->
  172. <?php if (!empty($pager)): ?>
  173. <div class="pager mb-0" style="text-align:left;">
  174. <ul class="pagination">
  175. <?php echo $pager; ?>
  176. </ul>
  177. </div>
  178. <?php endif; ?>
  179. </div>
  180. </div>
  181. <?php endif; ?>
  182. <!-- 结束搜索 -->
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!-- 热门搜索 -->
  189. <?php if (count($hot) > 0 && false): ?>
  190. <div class="container">
  191. <div class="search-links">
  192. <h4>热门搜索</h4>
  193. <p>
  194. <?php foreach($hot as $word => $freq): ?>
  195. <span><a href="<?php echo '?q=' . urlencode($word); ?>" class="primary-link"><?php echo htmlentities($word); ?></a></span>
  196. <?php endforeach; ?>
  197. </p>
  198. </div>
  199. </div>
  200. <?php endif; ?>
  201. <!-- 相关搜索 -->
  202. <?php if (count($related) > 0): ?>
  203. <div class="container">
  204. <div class="row">
  205. <div class="col-xs-12">
  206. <div class="panel panel-default">
  207. <div class="panel-body">
  208. <div class="search-links">
  209. <h4>相关搜索</h4>
  210. <p>
  211. <?php foreach ($related as $word): ?>
  212. <span><a href="<?php echo '?q=' . urlencode($word); ?>"><?php echo htmlentities($word); ?></a></span>
  213. <?php endforeach; ?>
  214. </p>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. <?php endif; ?>
  222. <script data-render="script">
  223. $(function () {
  224. var form = $('#search-form');
  225. var search = $("input[name='q']", form);
  226. search.autoComplete({
  227. minChars: 1,
  228. menuClass: 'autocomplete-searchmenu',
  229. header: '',
  230. footer: '',
  231. source: function (term, response) {
  232. try {
  233. xhr.abort();
  234. } catch (e) {
  235. }
  236. xhr = $.getJSON('{:addon_url("cms/search/suggestion")}', {q: term}, function (data) {
  237. response(data);
  238. });
  239. },
  240. onSelect: function (e, term, item) {
  241. if (typeof callback === 'function') {
  242. callback.call(elem, term, item);
  243. } else {
  244. form.trigger("submit");
  245. }
  246. }
  247. });
  248. form.submit(function () {
  249. if (search.val() == '') {
  250. layer.msg('请先输入关键词');
  251. search.focus();
  252. return false;
  253. }
  254. });
  255. $(document).on("click", "ul.orderlist li a", function () {
  256. $("input[name=order]", form).val($(this).data("value"));
  257. form.trigger("submit");
  258. });
  259. });
  260. </script>