快速入门:在 Azure 门户中创建演示搜索应用

在这个 Azure AI 搜索快速入门中,你将了解如何使用 Azure 门户的“创建演示应用”向导来生成可下载的“localhost”样式的 Web 应用,该应用在浏览器中运行。 根据其配置方式,生成的应用在首次使用时就能正常运行,并与搜索服务上的索引建立实时只读连接。 默认应用可以包含搜索栏、结果区域、边栏筛选器和自动提示支持。

演示应用有助于你直观地了解索引在客户端应用中的工作方式,但其不适用于生产场景。 生产应用应包括演示应用所不具备的安全性、错误处理和托管逻辑。

先决条件

开始之前,必须具备以下先决条件:

  • 具有活动订阅的 Azure 帐户。 创建试用版订阅

  • Azure AI 搜索服务。 创建服务或在当前订阅下查找现有服务。 可以使用本快速入门的免费服务。

  • Microsoft Edge(最新版本)

  • 要用作所生成应用程序的基础的搜索索引

    本快速入门使用内置的酒店示例数据集。 若要创建本练习中使用的索引,请运行“导入数据”向导,选择“hotels-sample”数据源,并接受所有默认值。

    示例数据的“数据源”页的屏幕截图。

索引可供使用后,转到下一步。

启动向导

  1. 使用 Azure 帐户登录 Azure 门户查找搜索服务

  2. 在“搜索管理”>“索引”

  3. 选择“hotels-sample-index”

  4. 在索引页的顶部,选择“创建演示应用”启动向导

  5. 在第一个向导页上,选择“启用跨源资源共享(CORS)”以将 CORS 支持添加到索引定义。 此步骤是可选的,但如果不执行此步骤,本地 Web 应用无法连接到远程索引。

    启用 CORS 操作的屏幕截图。

配置搜索结果

向导将为呈现的搜索结果提供一个基本布局,其中包含缩略图、标题和说明的空间。 其中的每个元素由索引中一个提供数据的字段赋值。

  1. 跳过缩略图,因为此索引没有图像,但如果索引字段填充了解析为公开可用图像的 URL,则应为缩略图区域指定该字段。 如果索引没有图像 URL,请将此字段留空。

  2. 在“标题”中,选择能够表达每个文档的唯一性的字段。 在此示例中,酒店名称是合理的选择。

  3. 在“说明”中,选择一个提供详细信息的字段,这些信息可以帮助用户确定是否要向下钻取特定的文档。 在此示例中,“说明”是很好的候选项。

    搜索结果配置页面的屏幕截图。

添加边栏

搜索服务支持分面导航(通常以边栏的形式呈现)。 分面基于可筛选且可分面的字段,在索引架构中表示。

在 Azure AI 搜索中,分面导航是一种累积筛选体验。 在一个类别中选择多个筛选器会展开结果(例如,在“城市”中选择“西雅图”和“贝尔维尤”)。 跨类别选择多个筛选器会缩小结果范围。

提示

可以在 Azure 门户中索引的“字段”选项卡上查看字段属性。 可在边栏中使用标记为可筛选和可分面的字段

  1. 在向导中,选择页面顶部的“边栏”选项卡。 你应该看到一个列表,其中有索引中被归为可筛选和可分面的所有字段。

  2. 删除一些字段以缩短边栏,这样在完成的应用中就没有滚动。

添加建议

建议是指附加到搜索框的自动查询提示。 演示应用支持建议,这些建议提供了基于部分文本输入的潜在匹配文档的下拉列表。

在此页中,选择要为其提供建议查询的字段。 应选择较短的字符串字段。 避免冗长的字段,例如“descriptions”。

以下屏幕截图显示了建议页面,还并列显示在应用中呈现的页面。 其中展示了如何使用字段选项,以及如何使用“显示字段名称”在建议中包含或排除标签。

建议配置页面的屏幕截图。

创建、下载和执行

  1. 选择页面底部的“创建演示应用”,生成 HTML 文件。

  2. 出现提示时,请选择“下载应用”以下载文件。

  3. 打开该文件,然后选择“搜索”按钮。 此操作会执行一个查询,它可以是返回任意结果集的空查询 (*)。 页面应类似于以下屏幕截图。

  4. 输入一个搜索词,然后使用筛选器来缩小结果范围。 如果没有看到建议的查询,请检查浏览器设置或尝试使用其他浏览器。

浏览器窗口中的搜索应用程序的屏幕截图。

清理资源

在自己的订阅中操作时,最好在项目结束时确定是否仍需要已创建的资源。 持续运行资源可能会产生费用。 可以逐个删除资源,也可以删除资源组以删除整个资源集。

你可以在 Azure 门户中查找和管理资源,只需使用左侧导航窗格中的“所有资源”或“资源组”链接即可。

请记住,免费服务仅限于三个索引、索引器和数据源。 可以在 Azure 门户中删除单个项目,以不超出此限制。

后续步骤

演示程序可用于原型制作,因为你可以在无需编写 JavaScript 或前端代码的情况下模拟最终用户体验,但当你在自己的项目中将要进行概念证明时,请查看其中一个反映实际应用的端到端代码示例: