HTML 使用通配符的搜索功能 - shopify

Question

我是 HTML 的超级初学者，但是，我正在尝试解决我网站的问题。我正在尝试将通配符 (*) 连接到消费者尝试搜索的任何内容的末尾，以便它选择类似标记的项目，但是，我不知道在哪里添加所述代码......我们当前的搜索查询在以下情况下运行良好根据部分关键字拉出项目，但是当点击 'enter' 按钮时，它会说找不到任何产品。

补充说明：这是一个 Shopify 网站，其主题来自 halothemes，因此大部分内容都是由他们编写的。

{% assign grid_results = true %}

<div class="search-page collection-template" data-search-page>
 <div class="container">
  {% if search.performed %}

{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}

{% paginate search.results by 15 %}

{% comment %}
We don't have any results to show. Feel free to show off featured products
or suggested searches here.
{% endcomment %}

{% if search.results_count == 0 %}
<header class="page-header">
  <h2>
    {% render 'multilang' with settings.search_1 %}
    <strong> &nbsp;"{{ search.terms }}"&nbsp; </strong>
    {% render 'multilang' with settings.search_2 %}
  </h2>
</header>

{% else %}

<header class="page-header">
  <h2>
    {% render 'multilang' with settings.search_3 %}
    <strong> &nbsp;"{{ search.terms }}"&nbsp; </strong>
    {% render 'multilang' with settings.search_4 %}
  </h2>
</header>

{% comment %}
Each result template, based on the grid_layout variable above
{% endcomment %}

<div class="block-row col-main">
  {% if grid_results == false %}
  <div class="product-collection products-list product-search row">
    {% for product in search.results %}
    <div class="grid-item col-12{% if settings.product_image_border%} grid-item-border{% endif %}">
      {% render 'search-result' with product as product %}
    </div>
    {% endfor %}
  </div>

  {% else %}

  <div class="products-grid product-search row product-collection">
    {% for product in search.results %}
    <div class="grid-item col-6 col-md-4{% unless settings.layout_style == 'layout_style_1170' %} col5 col-lg-3{% endunless %}{% if settings.product_image_border%} grid-item-border{% endif %}">
      {% if settings.style_product_grid == 'style_product_grid_2' %}
        {% render 'product-grid-item-style-2' with product as product %}
      {% else %}
        {% render 'product-grid-item' with product as product %}
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endif %}

{% if paginate.pages > 1 %}
<div class="padding">
  {% render 'pagination-page' paginate: paginate %}
</div>
{% endif %}
{% endpaginate %}

{% else %}

{% comment %}
If search.performed is false, someone either accessed the page without
the q parameter, or it was blank.
Be sure to show a search form here, along with anything else you want to showcase.
{% endcomment %}

<header class="page-header">
  <h2 style="text-align:center" {% if settings.enable_multilang %}data-translate="general.search.title"{%endif%}>{{ 'general.search.title' | t }}</h2>
  <div class="header-search__form">
      <form action="/search" method="get" class="search-bar" role="search">
          <input type="hidden" name="type" value="product">

          <input type="search" name="q"
              {% if settings.enable_multilang %} data-translate="general.search.placeholder" translate-item="placeholder"{% endif %}
              placeholder="{{ 'general.search.placeholder' | t }}"
              class="input-group-field" aria-label="Search Site" autocomplete="off">

          <button type="submit" class="btn icon-search">
              {% render 'icon-search' %}
          </button>
      </form>
  </div>
</header>
{% endif %}

如果你们需要任何其他信息，请告诉我！谢谢！

Answer 1

您可以使用简单的脚本在提交表单时向搜索查询添加通配符，例如：

var searchForm = document.querySelector(".search-bar");
searchForm.addEventListener("submit", function(e) {
  var searchInput = searchForm.querySelector("[name=q]");
  var q = searchInput.value;
  if (!q.match(/\*$/)) {
    e.preventDefault();
    searchInput.value = q + "*";
    searchForm.submit();
  }
});

HTML 使用通配符的搜索功能 - shopify

HTML search function using a wildcard - shopify

html

shopify

shopify-template