Search bar function

Hi everyone.

Has anyone tried to create a search bar function in Hype?

What do you mean by search bar…?

so I am building a site and I want to have a search function to search the entire site.
I will set the site up in one document using scenes as the different pages

You can just mark all rectangles that are searchable with a CSS class name and fetch them on a document level on key up on your input. Then search innerHTML of them and see if it matches the input text. As you can determine the scene a rectangle is in … either through code or by adding a data-attribute, you can display search results in a list. Quick take. Haven't looked for the forum if somebody did something like this. Certainly involves coding…

2 Likes

The one thing to remember is your scene elements and attributes do not fully exist until those scenes load.

This means you cannot fetch them on a document level from the get go with out loading each scene first.

You will need to create some sort of data list first that you actually search for the input.
Then use that info to show the scene and find the element or what ever.

In the past I have used the jquery API to do this.

Autocomplete | jQuery UI

But I just cobbled together this which does a similar thing that I have done before but without Jquery.


We have a text input on the landing Scene which will act as our search input.

We give it the appropriate innerHTML to create it as such.

<input id="my-text-box" list="agencies" placeholder="Agency">

In the Javascript we first run

We have a ( Global ) Associated Array Object (json type object) that has your search words listed under a scene.
i.e

scnFilter = [ 
	{
		"scene":  "1",
			"agents":[
			
			"bridgeman",
			"desmondoneill",
			"maryevans" 
					]
	},
	{"scene":  "2",
			"agents":[
			
			"alamy",
			"epa",
			"gettyimages" 
					]
	},
	
	{"scene":  "3",
			"agents":[
			
			"AP",
			"pa",
			"reuters" 
					]
	} 
	
	]

We use more code filter() to go over the the object, find each word and use them to create an option list in the search input.

The Search input will now show and filter the list as you type.

The find button will run code that will research the Global object for the selection and then find its Scene. It will then show that scene.

Each scene's onload will run the onScne() code that then looks for the first element which has a data attribute that includes the search result, it will outline it.

This is a quick example and there is much more that you can do to refine it.



search.hype.zip (271.2 KB)

2 Likes

3 posts were split to a new topic: How and when is the Hype DOM structure generated