javascript - 我的网站模板是否包含内置搜索功能？

Question

所以我正在编辑一个网站模板，直接从它的代码编辑所有内容(不使用 CMS)。它进展顺利，我已经能够理解几乎所有内容，以便能够根据我的需要编辑网站，但我难以理解的一件事是搜索功能。该网站包含许多插件，例如MailChimp 功能允许用户轻松编辑网站。设计者在网站上包含了一个搜索栏，目前当你搜索时它会重新加载索引文件。我已经对代码进行了一些研究以搜索任何插件，并在网站上查看了我如何能够在没有运气的情况下启动它。

如果有人能帮我看看模板的设计者是否添加了任何插件或功能来实际搜索网站，那就太好了。我现在需要确认我是需要开始设计搜索功能还是使用模板设计者提供的内容(如果他们已经提供的话)。

我想要的最终结果是能够搜索几个关键字，它会在新网页上显示博客文章，其中包含我在每个博客文章代码中包含的标签。

我将在下面发布有关搜索栏的 HTML 内容，并包含与搜索栏相关的 JavaScript 代码。

链接到我正在讨论的模板: https://www.styleshout.com/templates/preview/Abstract10/

HTML:

<div class="search-wrap">
  <form role="search" method="get" class="search-form" action="#">
      <label>
          <span class="hide-content">Search for:</span>
          <input type="search" class="search-field" placeholder="Search" value="" name="s" title="Search for:" autocomplete="off">
      </label>
      <input type="submit" class="search-submit" value="Search">
  </form>
  <a href="#" id="close-search" class="close-btn">Close</a>
</div>
<!-- end search wrap -->
<div class="triggers">
  <a class="search-trigger" href="#"><i class="fa fa-search"></i></a>
  <a class="menu-toggle" href="#"><span>Menu</span></a>
</div>
<!-- end triggers -->

JavaScript:

var ssSearch = function() {

var searchWrap = $('.search-wrap');
   var searchField = searchWrap.find('.search-field');
   var closeSearch = $('#close-search');
   var searchTrigger = $('.search-trigger');
   var body = $('body');

   searchTrigger.on('click', function(e){

      e.preventDefault();
      e.stopPropagation();   
      var $this = $(this);

      body.addClass('search-visible');
      setTimeout(function(){
         $('.search-wrap').find('.search-field').focus();
      }, 100);

   });


   closeSearch.on('click', function(){
      var $this = $(this);

      if(body.hasClass('search-visible')){
         body.removeClass('search-visible');
         setTimeout(function(){
            $('.search-wrap').find('.search-field').blur();
         }, 100);
      }
   });

   searchWrap.on('click',  function(e){
    if( !$(e.target).is('.search-field') ) {        
        closeSearch.trigger('click');           
    }
   });

   searchField.on('click', function(e){
      e.stopPropagation();
   });

   searchField.attr({placeholder: 'Search', autocomplete: 'off'});

   };

Answer 1

您提供的上述代码中未编写搜索功能。您可以根据您正在使用的后端技术使用各种搜索插件。您还可以使用 AWS 提供的 elasticsearch 服务器来为您的搜索结果建立索引。然后，您可以 ping 搜索端点以按照您想要的顺序获取结果。

查看 this link了解有关 Elasticsearch 的更多信息。