I am making a custom search bar for the header of my site. When there are search results, I try to display a container with a repeater inside containing the search results. Displaying of this container goes without problems, however when I try to hide the search result container, the container disappears first and the repeater contained inside after about half a second later…
Does a solution or workaround exist for this problem? I already tried to collapse it first but this just looks weird.
There are no adjustments or hover effects present on the container or repeater. This also happens regardless of adding the ‘fade’ effect to the hide function or not.
This is the code I use to show / hide the container.
const fadeOptions ={ “duration” : 300 , “delay” : 0 }
$searchBarInput . onInput (( e ) => {
if ( e . target . value . length !== 0 ) {
$cancelSearch . show ( ‘fade’ , fadeOptions )
} else {
$cancelSearch . hide ( ‘fade’ , fadeOptions )
}
if ( e . target . value . length > 1 ) {
//show the container containing the repeater
$searchResultsContainer . show ( ‘fade’ , fadeOptions );
//set the data of the repeater
$searchResults . data = filterModels ( query , e . target . value );
} else {
//hide the container, containing the repeteater wich hides with a delay
$searchResultsContainer . hide ( ‘fade’ , fadeOptions );
}
})
Here is a video of the effect in question.