How to show search?
KonradHoeffner opened this issue · comments
I want to construct a simple hello world search example application, but the README does not show how one is supposed to actually show the search. How can I tell itemsjs where my container is so that it is shown?
I cannot follow the examples because they all use external frameworks like Vue and React, which I don't.
Is it impossible to use itemsjs without Vue and React?
At https://jsfiddle.net/wnhao0qc/1/ is my example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/itemsjs@latest/dist/itemsjs.min.js"></script>
</head>
<body onload="main();">
</body>
</html>
JavaScript
const config = {
sortings: {
bezeichnung: {
field: 'id',
order: 'asc'
}
},
aggregations: {
tags: {
title: 'begriffsklasse',
size: 3
}
},
searchableFields: ['id', 'synonyme','definition','begriffsklasse']
};
const data = [
{id: "id1", name: "peter"},
{id: "id2", name: "bob"},
{id: "id3", name: "alice"}
];
function main()
{
itemsjs = itemsjs(data, config);
const search = itemsjs.search(); // <<<<<<<<<<------- this should create the search UI but nothing happens, the screen is blank
console.log(search);
}
The problem is that itemsjs.search() does nothing, which is understandable, because I didn't point it to a rendering container. What do I to do to show it?
Hi @KonradHoeffner, Itemsjs is a low level search engine which works in browser and in the backend. For specific rendering you can use everything like Vue, React, Angular or even jQuery or just plain DOM. You just need to create your specific logic for rendering filters, sorting options and search box.
I imagine you are looking for a widget which renders all search components for you like that https://github.com/algolia/instantsearch.js/ ?
Oh OK I didn't realize that, thanks for the clarification!
I think it would help users to clarify that in the README. Because there is a demo GIF in the README and it says search engine and not search library, like Fuse.js.
For example at https://fusejs.io/demo.html it is very clear that there is no GUI, because the results are shown in a text window.
Thanks for tips. I'll prepare soon a demo which is similar to fuse and operates on pure JSON.
That's true that this GIF is not really clear but it's showing some of capabilities of this search library if you implement html rendering. Also there is not much faceted search on the market so thanks to that GIF you know more or less what to expect from this library.
Feel free to create a widget on top of ItemsJS. ItemsJS has very performant algorithms and simple interface. There are many backend solution like https://github.com/meilisearch/instant-meilisearch or Algolia but no instant widget search for pure JS
Hello @KonradHoeffner and @cigolpl,
We created an adapter to link Itemjs with Instantsearch, I think this is a solution to your problem!
https://github.com/unplatform-io/instantsearch-itemsjs-adapter
@Ruitjes this looks really great for creating frontend site for a search data. Do you have a simple working demo or some "how tos" by any chance ? I suppose the interface of "instantsearch" is the same as in Meilisearch or Algolia so most of the demos on the internet should work out of the box with a little tweaks ?
@cigolpl Thanks! 🚀 Yes, we created a demo it's almost finished we will share it as soon as it's ready. Indeed the interface will look the same as in Algolia, so with a few little tweaks you switch between Algolia or our adapter.
@Ruitjes I've put a gif of your demo on the main page. I am aware that maybe it's not 100% ready but it is already more functional than previous demo and it has code so it is easy to start with it a new project or learn Instantsearch. We can update this gif at any time in the future if there will be a need
Thanks for the demo and and all the documentation updates, this resolves my issue!