Customizable ResultView

Elastic Search
1

How customizable ResultView can be? I have been trying to create my own view where every search hit is listed in the result body without success and not where what to modify to make it work. Any workarunds? Could a React component be passed?

Current output

Foo

ID: Foo
Hits: "This is a test. I have tested something."

Wanted output

Foo

ID: Foo
Hits:

  • Hit 1: "This is a test."
  • Hit 2: "I have tested something."

Code

import React from "react";

export default ({ result }) => (
    <li className="sui-result">
        <div className="sui-result__header">
            <span
                className="sui-result__title"
                dangerouslySetInnerHTML={{ __html: result.id.snippet }}
            />
        </div>
        <div className="sui-result__body">
            <ul className="sui-result__details">
                <li>
                    <span className="sui-result__key">ID</span>{" "}
                    <span
                        className="sui-result__value"
                        dangerouslySetInnerHTML={{
                            __html: result.id.raw
                        }}
                    />
                </li>
                <li>
                    <span className="sui-result__key">Contents</span>{" "}
                    <span
                        className="sui-result__value"
                        dangerouslySetInnerHTML={{
                            __html: result.description.snippet
                        }}
                    />
                </li>
            </ul>
            <p>result.description.snippet</p>
        </div>
    </li>
);
2

Hey, it's not clear to me what the issue is. You just want the results to be listed and formatted as a bulleted list? If so, check that the outputted html is a valid unordered list (<ul>) with list elements (<li>) inside of it. If that is true and you still don't see bullet points then you may just need to write some CSS for that.

3

Indeed. Using the National Parks example from GitHub, could you show me a way to do that?

4

Sure: https://codesandbox.io/s/search-ui-national-parks-example-with-bullets-sn2xs?file=/src/App.js

1 Like
5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.