Simulate a Search with two different Strings

Using JavaScript with Hype
1

Hi there.

I try to build a mockup where I have different scenes with a search field always at the same place (symbol).

The user should be able to enter two different strings e.g. "water" and "sun" and related to the entered string a hidden symbol layer should get visible.

So far I do the hide/unhide thing with different classes and a snippet like this ...

var elements = document.getElementsByClassName('toggleview1');

for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = elements[i].style.display == 'block' ? 'none' : 'block';
    }

I duplicated this snippet for different symbols and groups (toggleview1, toggleview2, toggleview3 etc.) and I already took a look at:

But as I am not a js coder it is hard for me to determine, whether there is a simpler way to achive the goal, because in this thread there is a lot functionality on top - and I would like to unhide a symbol instead of jumping to a scene. There a lot of scenes ...

Sorry that I cannot share the project, would be much easier, but I cant unfortunatly.

Any guesses?

2

Although you cannot post thr real project. Can you post a small mockup project showing a similar setup and coding you have.

Also you have not said why you need to give each symbol a different class name . I assume you are using the class name for other things.

You can though add more then one class name in the class name field. Then you can use one single class name for all the symbols for running a single instance of the code snippet.

3

Thanks! You are right - will do so and attach a project later.

Regarding the different class names, I have several symbols per scene and their visibility is toggeld through different buttons. And I think (do not know better) getElementById is always tricky with symbols and I have a lot of scenes, so I thought, this is the easiest way.

Will post a mockup of the mockup …

1 Like
4

Here we go … in the attahed project are two symbols “Search 1” and “Search 2”. What I want to achive is with term1 unhide search 1 and with another unhide 2.

search-dummy.hype.zip (41.0 KB)

5

Give the ‘Suche’ symbol an ID of Suche
Give Search1, Search2 the class name toggleClass. If you still need toggle-a,b, and c , then add them along with the toggleClass name in the classes.

Set Search1’s ID to term1
Set Search2’s ID to term2
(The last bit could also work from unique class names in the list. )

Change the visibility to on ( the little eyes) and set the visibility in the Element panel to hidden.
Give the search button (magnifying glass) the id doSearchButton

Point the search button & the close buttons at a single JS function.

var  toggleAreas =  document.getElementsByClassName('toggleClass') ;
	 
	var textResult =  hypeDocument.getSymbolInstanceById('Suche').element().querySelector('#input-style').value
	console.log(textResult);
	
	  //
	   for (var i = 0; i < toggleAreas.length; i++) {
	   toggleAreas[i].style.display = 'none';
	  
	   
	if (textResult !== "" && element.id == "doSearchButton" ){
	  var  toggleOn = hypeDocument.getSymbolInstanceById(textResult).element();
	  
	  toggleOn.style.display = 'block';
	  
	   }
	  }

search-dummy_MH1.hype.zip (48.4 KB)

1 Like
6

Thanks so much! Will test it right away.

7

Maybe I am wrong but if I use the ID Suche for the symbol I have a problem reusing it in differen scenes. But as mentioned earlier, I have to … round about 15 differenet scenes … any ideas?

Thanks in advance.

8

I will duplicate everything and use a ID per scene or something - not elegant, but hopefully I get it to work. Thanks again.

9

Sorry to bother - I do not get it to work at all. The attached Hype-Document does not work for me - maybe I do not get it.

If I understood you right - your solution helps with the show and hide thing, but I cannot differ the text input … is this the right way?

if (textResult == "water" && element.id == "doSearchButton" ){
  var  toggleOn = hypeDocument.getSymbolInstanceById(textResult).element();
  
  toggleOn.style.display = 'block';
  console.log("water");

if (textResult == "sun" && element.id == "doSearchButton" ){
  var  toggleOn = hypeDocument.getSymbolInstanceById(textResult).element();
  
  toggleOn.style.display = 'block';
  console.log("sun");

if (textResult == "" && element.id == "doSearchButton" ){
  var  toggleOn = hypeDocument.getSymbolInstanceById(textResult).element();
  
  toggleOn.style.display = 'block';
  console.log("nothing");

Also I still have the big issue, with the symbol, as I want to duplicate the Searchbutton all over the place - could I put the symbol in a symbol to prevent this?

hypeDocument.getSymbolInstanceById('Suche').element().querySelector('#input-style').value
console.log(textResult);
10

me stupid. the symbol thing is not a thing, as the ID will be always the same - no need to duplicate.

11

reading just helps. really. thanks again. now I understood.

2 Likes