AI 驱动的混合搜索正在封闭测试中。 加入等候名单 以获得早期访问权限!

前往主页Meilisearch 的标志
返回文章
2023 年 7 月 20 日

使用 React InstantSearch 实现推广搜索结果

了解如何使用 React InstantSearch Hooks 和 Meilisearch 显示推广的结果。

Laurent Cazanove
Laurent CazanoveDX 工程师 & 文案撰写人@StriftCodes
Implementing promoted search results with React InstantSearch

今天,我们将学习如何通过将给定文档置于搜索结果顶部来推广结果。这可以用于电子商务中,以提高特色产品的知名度,或在应用内搜索中优先考虑用户特定的内容。我们将使用 Node.js 和 React 来实现推广文档。

需要在 Meilisearch 引擎内部推广文档吗? 提供您的反馈

本教程将使用示例电影数据集。我们的目标是在输入“funny”、“children”或“fish”时,将“海底总动员”显示在结果的顶部。

文件夹结构

在本指南中,我们将前端代码与用于配置 Meilisearch 的后端代码分开。

我们将使用以下文件夹结构来组织我们的项目

my-app/
├─ node_modules/
├─ data/ <-- Backend code goes there
│  ├─ setup.js
│  ├─ movies.json
│  ├─ promoted-movies.json
├─ src/ <-- React code will go there
│  ├─ App.jsx
│  ├─ main.js
│  ├─ ...
├─ package.json

首先,为我们的应用程序创建一个目录(例如 my-app),或使用现有的目录。在我们的应用程序目录中,让我们为后端代码创建一个 data 文件夹。

下载 JSON 数据集并将它们存储在我们新的 data 文件夹中。在此处下载数据集

电影 (“下载”)

推广的电影 (“下载”)

好的。让我们开始编码!

Meilisearch 设置

首先,我们需要启动一个 Meilisearch 实例。您可以通过遵循本地安装指南中的说明或在 Meilisearch Cloud 上创建一个帐户来实现。我们将编写一个设置脚本来配置我们的 Meilisearch 实例并种子数据。

此设置脚本使用 JavaScript SDK,但您可以使用任何 Meilisearch SDK

在本教程中,我们使用 Node 18。让我们安装 JavaScript SDK

npm install meilisearch

然后,让我们创建一个 setup.js 文件

// data/setup.js

import { MeiliSearch } from 'meilisearch'

// Load the datasets
import movies from './movies.json' assert { type: 'json' }
import promotedMovies from './promoted_movies.json' assert { type: 'json' }

// Load credentials from environment
const credentials = {
  host: 'your Meilisearch host',
  apiKey: 'your Meilisearch Admin API key' 
}

// Configuration
const INDEX_NAME = 'movies'
const PROMOTED_INDEX_NAME = `promoted-${INDEX_NAME}`

const searchableAttributes = ['title', 'overview', 'genre', 'release_date']
const displayedAttributes = ['id', 'title', 'overview', 'genre', 'poster', 'release_date']

const setup = async () => {
	console.log('🚀 Seeding your Meilisearch instance')
	
	const client = new MeiliSearch(credentials)
	
	// Adding searchable attributes to movies index
client.index(INDEX_NAME).updateSearchableAttributes(searchableAttributes)
	// In the promoted movies index, only `keywords` is searchable
client.index(PROMOTED_INDEX_NAME).updateSearchableAttributes(['keywords'])
	
	// Both indexes have the same visible attributes
	// `keywords` is hidden in the promoted movies index
	client
		.index(INDEX_NAME)
		.updateDisplayedAttributes(displayedAttributes)
	client
		.index(PROMOTED_INDEX_NAME)
		.updateDisplayedAttributes(displayedAttributes)
	
	// Adding documents
	await client.index(INDEX_NAME).addDocuments(movies)
	await client.index(PROMOTED_INDEX_NAME).addDocuments(promotedMovies)
	
	// Wait for tasks completion
	await watchTasks(client, INDEX_NAME)
	await watchTasks(client, PROMOTED_INDEX_NAME)
}

// Helper to watch tasks
const watchTasks = (client, uid) {
	console.log(`Watching tasks on index ${uid}`)
	const tasks = await client.index(uid).getTasks()
	console.log(`${uid} index: waiting for tasks`)
	await client.index(uid).waitForTasks(tasks)
	console.log(`${uid} index: tasks finished`)
}

await setup()

此脚本创建我们的两个索引。让我们回顾一下它做了什么

  • 它为 moviespromoted-movies 设置相同的显示属性
  • 它设置可搜索属性;在 promoted-movies 索引中,只有 keywords 是可搜索的。
  • 它将文档添加到我们的 Meilisearch 索引中。

为了 [优化索引速度](/blog/best-practices-for-faster-indexing/,请在配置设置之后始终添加文档。

我们现在可以使用 Node.js 运行该脚本

node setup.js

我们的 Meilisearch 实例现在已配置和种子。🥳 现在是时候使用 React 实现推广的结果了!

显示推广的结果

首先,我们将导航回应用程序的根目录(例如,my-app)。我们将使用 Vite 在此文件夹中创建 React 应用程序。

npm create vite@latest . --template react

如果 CLI 要求删除当前目录中的现有文件,请回答“否”。

然后,让我们安装其他依赖项,以便将 InstantSearch 与 Meilisearch 集成

npm install @meilisearch/instant-meilisearch react-instantsearch-hooks-web

让我们编辑我们的 App 组件以显示搜索结果。我们希望推广的结果显示在其余结果之前。让我们用我们自己的代码替换 App.jsx 样板代码

// src/App.jsx

import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import { InstantSearch, SearchBox, Hits, Index } from 'react-instantsearch-hooks-web';
   
const MEILI_HOST = 'your Meilisearch host'
const MEILI_SEARCH_KEY = 'your Meilisearch Search API key'

const meilisearchClient = instantMeiliSearch(MEILI_HOST, MEILI_SEARCH_KEY)

const App = () => (
	<div>
		<h1>Hello React</h1>
		<InstantSearch searchClient={meilisearchClient}>
			<SearchBox />
			<h2>Results</h2>
			<Index indexName='promoted-movies'>
				<Hits />
			</Index>
			<h2>More results</h2>
			<Index indexName='movies'>
				<Hits />
			</Index>
		</InstantSearch>
	</div>
);

export default App;

我们现在可以使用 npm run dev 运行开发服务器。在浏览器中,我们的应用程序应显示如下内容

HTML output of the code above

在其他结果之前显示推广的结果

恭喜。我们已成功地在其余结果之前显示了我们的推广结果。🎉

遇到困难?请随时在我们的 Discord 社区中寻求帮助。

进一步发展

本教程探讨了实现推广结果的一种方法。另一种技术是在后端实现文档置顶,使用 Meilisearch SDK 之一。这种方法的好处是允许在单个响应中合并结果(就像它们来自单个索引一样)。

两种技术都可以实现类似的结果。我们还计划将推广的文档集成到 Meilisearch 引擎中。在之前的链接中提供您的反馈,以帮助我们优先处理它。

如需了解更多 Meilisearch 的信息,您可以订阅我们的新闻简报。您可以通过查看 路线图 并参与我们的 产品讨论来了解更多关于我们产品的信息。

如有其他任何问题,请加入我们在 Discord 上的开发者社区。

我会在那里见到您。

How to add AI-powered search to a React app

如何将 AI 驱动的搜索添加到 React 应用程序

使用 Meilisearch 的 AI 驱动的搜索构建一个 React 电影搜索和推荐应用程序。

Carolina Ferreira
Carolina Ferreira2024 年 9 月 24 日
Build your Next.js Shopify storefront with Blazity

使用 Blazity 构建您的 Next.js Shopify 店面

了解如何使用 Next.js 和 Blazity 商业入门工具构建 Shopify 店面。

Laurent Cazanove
Laurent Cazanove2024 年 8 月 19 日
Meilisearch 1.8

Meilisearch 1.8

Meilisearch 1.8 带来了负关键词搜索、搜索稳健性和 AI 搜索的改进,包括新的嵌入器。

Carolina Ferreira
Carolina Ferreira2024 年 5 月 7 日