直观的搜索界面对于任何出色的在线体验都至关重要。但很多时候, 它们可能需要花费大量的精力来建造并保持
在这段视频中，你将学习如何设计并通过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应用程序搜索快速入门
