Question: Custom result list rendering

[traverse]

I was wondering if it's possible to render a custom result list. I know it's possible to render custom results
and custom search inputs but if I for example require a "Click here to see all the results" button in my result list because rendering 200 results isn't really viable. What would in this case be the most appropriate solution?

[levithomason]

Hm, could you post some example pseudo code of what you're to accomplish and the desired output?

[traverse]

I would like to do something like the following:

<Search>
    <Search.Input />
    <Search.Results>
        { results.map(result => <Search.Result /> }
        <CustomComponent />
    <Search.Results />
</Search>

Where output should something along the lines of:

<div class="ui search">
    <div class="ui icon input">
        <input type="text" class="prompt">
        <i class="search icon"></i>
    </div>
    <div class="results transition">
        <div class="result">...</div>
        ...
        <!-- my CustomComponent -->
        <a href="/to/results">go to results page</a> 
    </div>
</div>

So the output is basically a default search component but you can add custom things to the result list easily. At the moment I solved it by pushing an extra item to the results array if there are more than 10 results. This solution however is in my opinion not a very clean way to do it, if you have any other solutions I'm all ears. 👍

[levithomason]

At the moment I solved it by pushing an extra item to the results array if there are more than 10 results.

This is actually precisely what I would recommend :) Reason being, it is the only way to get supported markup and behavior. Will close for housekeeping. If anyone comes up with a better idea, I'd love to hear it and review a PR.