如何为你的应用程序或网站快速构建一个搜索界面

直观的搜索界面对于任何出色的在线体验都至关重要。但很多时候, 它们可能需要花费大量的精力来建造并保持

在这段视频中，你将学习如何设计并通过elasticsearch用户界面保持简单

直观的搜索界面对于任何出色的在线体验都至关重要

但很多时候, 它们可能需要花费大量的精力来建造并保持

在这段视频中，你将学习如何设计

并通过elasticsearch用户界面保持简单

7

00:00:17,600 --> 00:00:19,599

在几个快速步骤中，您将学会

8

00:00:19,600 --> 00:00:24,199

轻松创建搜索用户界面，以及如何将其集成到应用程序中

9

00:00:25,400 --> 00:00:27,799

首先，让我们从创建一个新引擎开始

10

00:00:27,800 --> 00:00:30,999

在elastic应用程序搜索中，使用示例引擎

11

00:00:31,000 --> 00:00:33,399

实例中，提供美国59个国家公园的数据

12

00:00:34,200 --> 00:00:35,999

现在，数据已被摄取

13

00:00:36,000 --> 00:00:37,599

让我们创建一个搜索界面

14

00:00:37,600 --> 00:00:39,899

允许您的用户搜索文档

15

00:00:40,600 --> 00:00:41,799

做到这一点的最简单方法

16

00:00:41,800 --> 00:00:44,099

是使用搜索用户界面，这是一种工具

17

00:00:44,100 --> 00:00:45,699

允许您创建自定义用户界面

18

00:00:45,700 --> 00:00:46,799

只需点击几下即可

19

00:00:47,800 --> 00:00:48,499

在此视图中

20

00:00:48,600 --> 00:00:50,399

您可以选择要使用的字段

21

00:00:50,400 --> 00:00:51,499

在您的搜索界面中

22

00:00:52,300 --> 00:00:54,299

首先，选择标题字段

23

00:00:54,300 --> 00:00:55,599

用于显示结果

24

00:00:56,300 --> 00:00:57,599

当您单击该字段时

25

00:00:57,600 --> 00:00:59,299

相应的字段将突出显示

26

00:00:59,300 --> 00:01:01,200

在接口的示例中

27

00:01:01,300 --> 00:01:04,799

您还可以定义哪些字段将用于过滤结果

28

00:01:05,600 --> 00:01:06,999

让我们提供一种可能性

29

00:01:07,000 --> 00:01:09,099

按州过滤国家公园

30

00:01:10,000 --> 00:01:12,599

默认情况下，您的结果按相关度排序

31

00:01:13,200 --> 00:01:13,799

然而，

32

00:01:13,900 --> 00:01:15,999

您还可以定义可使用的字段

33

00:01:16,000 --> 00:01:17,099

对您的文档进行排序的步骤

34

00:01:17,700 --> 00:01:20,299

让我们选择英亩作为第二个排序选项

35

00:01:20,700 --> 00:01:22,199

您可以使用URL字段

36

00:01:22,200 --> 00:01:24,199

定义用户将重定向到的位置

37

00:01:24,200 --> 00:01:25,599

当点击结果时

38

00:01:25,700 --> 00:01:27,199

它可以链接到网站

39

00:01:27,200 --> 00:01:28,199

或应用程序

40

00:01:29,200 --> 00:01:30,999

一旦我们完成了配置

41

00:01:31,100 --> 00:01:33,399

让我们点击生成搜索体验

42

00:01:34,300 --> 00:01:35,299

就这样!

43

00:01:36,000 --> 00:01:39,599

现在，您为您的用户提供了一个现代化的、功能齐全的搜索界面

44

00:01:40,300 --> 00:01:42,299

此界面具有自动完成功能

45

00:01:42,400 --> 00:01:44,899

内置的高亮显示、排序和过滤功能

46

00:01:45,000 --> 00:01:46,899

作为elasticsearch用户界面的一部分

47

00:01:47,800 --> 00:01:49,499

将其集成到您的应用程序中

48

00:01:49,600 --> 00:01:51,699

你可以很容易地下载源代码

49

00:01:51,800 --> 00:01:53,199

并对其进行更多定制

50

00:01:53,800 --> 00:01:55,199

让我们先试一试

51

00:01:55,200 --> 00:01:57,299

下载并解压缩压缩包

52

00:01:57,900 --> 00:01:59,799

此文件夹中有许多文件

53

00:02:00,000 --> 00:02:02,399

但让我们来看看app.js文件

54

00:02:03,300 --> 00:02:07,499

您可以在app.js文件中更新已创建的接口

55

00:02:08,100 --> 00:02:11,099

此界面是使用专用的React库构建的

56

00:02:11,800 --> 00:02:14,499

此库可用于构建搜索体验

57

00:02:15,400 --> 00:02:17,799

用户界面基于多个组件构建

58

00:02:18,400 --> 00:02:21,499

用户界面的每个块都与一个组件相关

59

00:02:21,600 --> 00:02:25,399

您可以轻松更新这些组件以定制您的搜索体验

60

00:02:26,300 --> 00:02:29,099

最后，在本地运行搜索界面

61

00:02:29,100 --> 00:02:31,699

只需在文件夹中运行NPM Install

62

00:02:31,800 --> 00:02:33,699

压缩文件已解压缩

63

00:02:34,500 --> 00:02:36,899

几秒钟后，您的项目就准备好了

64

00:02:37,000 --> 00:02:40,099

只需运行NPM Start，就可以了

65

00:02:40,300 --> 00:02:41,999

您现在拥有相同的搜索界面

66

00:02:42,000 --> 00:02:42,799

在本地运行

67

00:02:42,800 --> 00:02:44,499

而且您可以轻松地对其进行定制

68

00:02:44,500 --> 00:02:45,799

感谢收看这段视频

69

00:02:45,800 --> 00:02:47,699

关于如何创建自定义搜索界面

70

00:02:47,700 --> 00:02:48,999

实现灵活的应用程序搜索

71

00:02:49,600 --> 00:02:50,699

如果您想了解更多信息

72

00:02:50,800 --> 00:02:53,099

查看我们的elastic应用程序搜索快速入门