searchkit 片段只显示一个观察词

问题描述 投票:0回答:0

我正在使用 React/ElasticSearch/SearchKit/ReactMarkdown 为网站制作搜索引擎。搜索引擎依赖于搜索文章的内容。我想在我的搜索结果中截取或突出显示同一篇文章中的所有匹配词。我发现一个问题,当我使用 SearchKit 时,它只突出显示一行中的匹配词。例如:如果我把这一段作为降价内容:

    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"

如果我搜索 Lorem 这个词,代码片段会在第一句话中只为我突出显示“lorem”这个词,如下所示: [![在此处输入图片描述][1]][1]

我不想要这个我希望它是这样的:'Lorem Ipsum 只是虚拟的......Lorem Ipsum 一直是......包含 Lorem Ipsum 段落的......'

这是我的 React 组件:

import React, { Component } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
// import { ReactiveBase, DataSearch, SearchBox, MultiList } from "@appbaseio/reactivesearch";
import Client from "@searchkit/instantsearch-client";
import Searchkit from "searchkit";
import { InstantSearch, SearchBox, Hits, RefinementList, Snippet } from "react-instantsearch-dom";

export default function LandingPage(){
  const sk = new Searchkit({
    connection: {
      host: "http://localhost:9200",
  
    },
    search_settings: {
      highlight_attributes: ["title", 'body'],
      snippet_attributes: ['title',"body"],
      search_attributes: [{ field: "title", weight: 3 }, "body", "bibiliography"],
      result_attributes: ["title", "body", "bibiliography"],
      facet_attributes: ['title.key',  'entryOrigin.country.raw', 'entryClassification.theclass.key', 'entryauthor.name.key'],
   
    },
  })
  const searchClient = Client(sk);
  const hitView = ({ hit }) => {
    console.log(hit)
    return (
      <div>
      
        <h2>{hit.title}</h2>
        <p>{hit.body}</p>
        <h3><Snippet hit={hit} attribute="body" /></h3>
        {/* <ReactMarkdown className="SE--markdown--content" rehypePlugins={[rehypeRaw, remarkGfm]} children={hit.body} remarkPlugins={[remarkGfm]} /> */}
      </div>
    )
  }

    return (
      <div>
      <InstantSearch indexName="entries" searchClient={searchClient}>
      <SearchBox />
      <Hits />
      <RefinementList attribute="title.key" searchable={true} limit={20} />
      <RefinementList attribute='entryOrigin.country.raw' searchable={true} limit={20} />
      <RefinementList attribute='entryClassification.theclass.key' searchable={true} limit={20} />
      <RefinementList attribute='entryauthor.name.key' searchable={true} limit={20} />
      <Hits hitComponent={hitView} />
      
    </InstantSearch>
    <div>Theee</div>
      
    </div>
    
    )
}

那么它是否适用于摘录或突出显示所有匹配的单词?如果是,我该怎么做?另外,如何在 ReactMarkdown 中显示 Snippet 组件? [1]: https://i.stack.imgur.com/ZVWlw.png

reactjs elasticsearch markdown highlight searchkit
© www.soinside.com 2019 - 2024. All rights reserved.