Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to show search?

See original GitHub issue

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?

Issue Analytics

State:
Created 2 years ago
Comments:8 (6 by maintainers)

Top GitHub Comments

3reactions

Ruitjescommented, Dec 2, 2021

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

2reactions

cigolplcommented, Dec 3, 2021

@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