How to show search? - Githubissues

KonradHoeffner commented 3 years ago

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?

cigolpl commented 3 years ago

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/ ?

KonradHoeffner commented 3 years ago

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.

cigolpl commented 3 years ago

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

Ruitjes commented 2 years ago

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

cigolpl commented 2 years ago

@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 ?

Ruitjes commented 2 years ago

@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.

cigolpl commented 2 years ago

@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

KonradHoeffner commented 2 years ago

Thanks for the demo and and all the documentation updates, this resolves my issue!

itemsapi / itemsjs

How to show search? #74

HTML

JavaScript