# 前台搜索概述

> Shoplazza 主题中前台搜索的工作方式：q 与 page 查询参数、搜索表单的写法，以及搜索结果页的 URL 结构。

店面搜索基于[查询参数](/docs/theme/theme-features/site-navigation-and-search/storefront-search/#查询参数)，这些参数决定了搜索结果返回哪些信息以及如何返回。

查询参数可以通过在[搜索表单](/docs/theme/theme-features/site-navigation-and-search/storefront-search/#搜索表单)中包含输入字段来使用，并在执行搜索时反映在[搜索 URL](/docs/theme/theme-features/site-navigation-and-search/storefront-search/#搜索-url-结构) 中。

您还可以为 theme 添加预测搜索功能，使建议结果在您输入搜索词时立即显示。如需了解预测搜索，请参阅[为 theme 添加预测搜索](./predictive-search)。

## 查询参数

搜索查询接受以下参数：

| 查询参数 | 类型    | 必填 | 说明                                |
| :------- | :------ | :--- | :---------------------------------- |
| `q`      | String  | 是   | 搜索查询词。                        |
| `page`   | Integer | 否   | 指定当前搜索结果页码，默认为 `1`。  |

## 搜索表单

搜索表单可以用具有 `action="/search"` 属性的 `<form>` 元素来实现。

:::tip
建议使用 [routes object](/docs/theme/references/liquid/objects/routes) 来填充 `action` 属性，以确保多语言店铺使用正确的 URL。
:::

在表单内，您可以为上述每个[查询参数](/docs/theme/theme-features/site-navigation-and-search/storefront-search/#查询参数)添加输入字段，每个输入字段具有以下属性：

* `name="query-parameter"`
* `value="parameter-value"`

```liquid title="搜索表单示例"
<form action="{{ routes.search_url }}">
  <input type="text" name="q" value="{{ search.terms | escape }}">
  <input type="submit" value="搜索">
</form>
```

## 搜索 URL 结构

执行搜索后，搜索页面的 URL 会相应更新。

例如，使用以下参数进行搜索将返回如下 URL：

| 属性 | 值     |
| :--- | :----- |
| `q`  | `gift` |

```text
/search?q=gift
```