【发布时间】：2020-10-20 03:48:55
【问题描述】：
我是前端编程领域的新手，需要一些建议。我正在尝试为搜索应用程序建立一个网站。为此，我正在使用 Elastic Search UI（在此处查找文档：https://github.com/elastic/search-ui）。 Elastic Search UI 提供了布局和一些技术用法，这对搜索请求很有帮助。
我从了解有关国家公园的给定示例页面开始。代码如下：
import React from "react";
import moment from "moment";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import {
ErrorBoundary,
Facet,
SearchProvider,
SearchBox,
Results,
PagingInfo,
ResultsPerPage,
Paging,
Sorting,
WithSearch
} from "@elastic/react-search-ui";
import {
BooleanFacet,
Layout,
SingleSelectFacet,
SingleLinksFacet
} from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";
const SORT_OPTIONS = [
{
name: "Relevance",
value: "",
direction: ""
},
{
name: "Title",
value: "title",
direction: "asc"
}
];
const connector = new AppSearchAPIConnector({
searchKey: "search-371auk61r2bwqtdzocdgutmg",
engineName: "search-ui-examples",
hostIdentifier: "host-2376rb",
endpointBase: ""
});
const config = {
alwaysSearchOnInitialLoad: true,
searchQuery: {
result_fields: {
title: {
snippet: {
size: 100,
fallback: true
}
},
nps_link: {
raw: {}
},
description: {
snippet: {
size: 100, // size of the description field, i.e. the text displayed
fallback: true
}
}
},
disjunctiveFacets: ["acres", "states", "date_established", "location"],
facets: {
world_heritage_site: { type: "value" },
states: { type: "value", size: 30 },
acres: {
type: "range",
ranges: [
{ from: -1, name: "Any" },
{ from: 0, to: 1000, name: "Small" },
{ from: 1001, to: 100000, name: "Medium" },
{ from: 100001, name: "Large" }
]
},
location: {
// San Francisco. In the future, make this the user's current position
center: "37.7749, -122.4194",
type: "range",
unit: "mi",
ranges: [
{ from: 0, to: 100, name: "Nearby" },
{ from: 100, to: 500, name: "A longer drive" },
{ from: 500, name: "Perhaps fly?" }
]
},
date_established: {
type: "range",
ranges: [
{
from: moment()
.subtract(50, "years")
.toISOString(),
name: "Within the last 50 years"
},
{
from: moment()
.subtract(100, "years")
.toISOString(),
to: moment()
.subtract(50, "years")
.toISOString(),
name: "50 - 100 years ago"
},
{
to: moment()
.subtract(100, "years")
.toISOString(),
name: "More than 100 years ago"
}
]
},
visitors: {
type: "range",
ranges: [
{ from: 0, to: 10000, name: "0 - 10000" },
{ from: 10001, to: 100000, name: "10001 - 100000" },
{ from: 100001, to: 500000, name: "100001 - 500000" },
{ from: 500001, to: 1000000, name: "500001 - 1000000" },
{ from: 1000001, to: 5000000, name: "1000001 - 5000000" },
{ from: 5000001, to: 10000000, name: "5000001 - 10000000" },
{ from: 10000001, name: "10000001+" }
]
}
}
},
apiConnector: connector
};
export default function App() {
return (
<SearchProvider config={config}>
<WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
{({ wasSearched }) => {
return (
<div className="App">
<ErrorBoundary>
<Layout
header={
<SearchBox
/>
}
sideContent={
<div>
{wasSearched && (
<Sorting label={"Sort by"} sortOptions={SORT_OPTIONS} />
)}
<Facet
field="states"
label="States"
filterType="any"
isFilterable={true}
/>
<Facet
field="world_heritage_site"
label="World Heritage Site?"
view={BooleanFacet}
/>
<Facet
field="visitors"
label="Visitors"
view={SingleLinksFacet}
/>
<Facet
field="date_established"
label="Date Established"
filterType="any"
/>
<Facet
field="location"
label="Distance"
filterType="any"
/>
<Facet
field="acres"
label="Acres"
view={SingleSelectFacet}
/>
</div>
}
bodyContent={
<Results
titleField="title"
urlField="nps_link"
shouldTrackClickThrough={true}
/>
}
bodyHeader={
<React.Fragment>
{wasSearched && <PagingInfo />}
{wasSearched && <ResultsPerPage />}
</React.Fragment>
}
bodyFooter={<Paging />}
/>
</ErrorBoundary>
</div>
);
}}
</WithSearch>
</SearchProvider>
);
}
示例页面可以在这里看到：
https://search-ui-stable.netlify.app/
我了解大部分代码以及如何根据需要修改搜索组件。现在我想“上传”我自己的数据。据我了解，我必须通过 API 执行此操作。我已经写了一个，它需要一些输入查询（即搜索请求）并输出一个 json 文件。我现在的问题是：如何“提取”搜索查询并将其传递给我的 API 并显示结果，这应该是我的 API 的输出？
我想，我必须在这里添加一些代码：
<WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
{({ wasSearched }) => {
但我不太确定该怎么做。谢谢您的帮助！ :)
【问题讨论】：
标签： javascript java reactjs api elasticsearch