Simulate Search Pt. II - Show layer with enter key

Using JavaScript with Hype
1

Hi again. Thanks to @MarkHunte and my reading skills I have now working everything properly: toggle layers by their ID to simulate search results for certain terms ... in the attached file - "water" and "sun".

So far you have to click on the search glas to active the layer-toggle-thing, but how to do so by pressing ENTER?

I checked the "textInputListener-v2.hypetemplate" attached in the thread ...

So what I am trying to do: with entry of the scene or later always wait for the ENTER keycode and then do the same as in the ShowHide function ... but it does not work. If I put out the console of "textResult" which should contain the content of the input field - it is always empty.

I think the problem is, that I can not get the values from "outside" the symbol ... so where to get "hypeDocument.getSymbolInstanceById('Suche').element().querySelector('#input-style').value" while being on scene level .... maybe I am totally wrong.

And as I am from cologne, I will get myself a couple of Koelsch to clear up my head.

Thanks so far.seach-dummy.hype.zip (40.6 KB)

2

Add this function as a new function and then add it to the On Symbol Load for the Suche symbol

	var textResult =  element.querySelector('#input-style')
	window.doSearchButton = element.querySelector('#doSearchButton');
 
textResult.addEventListener("keypress", function(event){
     if (event.keyCode == 13) { // Enter key
     
     
        	    hypeDocument.functions().ShowHide(hypeDocument, window.doSearchButton , event) 
	}
});

By the way you sun term is broken.

1 Like
3

sun is shining. thanks again.

1 Like
4

Just inserted everything in the document - see attached.

search-simulation-enterkey.hype.zip (42.4 KB)

1 Like