Hi, any help would be really appreciated.
I’ve added a user input box and i’ve managed to add an auto-suggest dropdown below it.
When i select an option from the auto-suggest box, it then populates the user input box which is great.
What code do i need to add for it to then filter the dataset based on the selection made from the auto-suggest box. The code i’ve used is below. (I’m a beginner so please forgive any mistakes)
Thanks
Joe
import wixData from ‘wix-data’ ;
const maxListSize = 5 ;
let listSize ; // the number of displayed items in the repeater
let currIndex = - 1 ; // the current index of the selected item
let debounceTimer ;
$w . onReady ( function () {
$w ( ‘#autosuggestRepeater’ ). onItemReady (( $item , itemData , index ) => itemReadyHandler ( $item , itemData , index ));
$w ( ‘#devicenameinput’ ). onKeyPress (( event ) => keyPressHandler ( event . key ));
$w ( ‘#devicenameinput’ ). onFocus (() => keyPressHandler ()); // trigger the default case inside the handler
});
function keyPressHandler ( key ) {
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = null ;
}
debounceTimer = setTimeout (() => { // wrapping the handler with setTimeOut in order to delay the handling to the point the user has finished typing
if ( $w ( ‘#devicenameinput’ ). value . length === 1 ) {
currIndex = - 1 ;
$w ( ‘#autosuggestRepeater’ ). collapse ();
} else {
switch ( key ) {
case ‘Enter’ :
$w ( ‘#devicenameinput’ ). value = $w ( ‘#autosuggestRepeater’ ). data [ currIndex ]. title ;
$w ( ‘#autosuggestRepeater’ ). collapse ();
break ;
case ‘ArrowUp’ :
if ( currIndex > 0 ) {
currIndex = currIndex - 1 ;
}
break ;
case ‘ArrowDown’ :
if ( currIndex < listSize - 1 ) {
currIndex = currIndex + 1 ;
}
break ;
case ‘Escape’ :
$w ( ‘#devicenameinput’ ). value = ‘’ ;
currIndex = - 1 ;
$w ( ‘#autosuggestRepeater’ ). collapse ();
break ;
default :
currIndex = - 1 ;
wixData . query ( ‘MobileSpecMain’ )
. contains ( ‘deviceName’ , $w ( ‘#devicenameinput’ ). value )
. ascending ( ‘deviceName’ )
. limit ( maxListSize )
. find ()
. then (( res ) => {
if ( res . items . length !== 0 ) {
$w ( ‘#autosuggestRepeater’ ). data = [];
$w ( ‘#autosuggestRepeater’ ). data = res . items ;
listSize = res . items . length ;
$w ( ‘#autosuggestRepeater’ ). expand ()
} else {
$w ( ‘#autosuggestRepeater’ ). collapse ();
}
});
break ;
}
}
}, 250 );
}
function itemReadyHandler ( $item , itemData , index ) {
$item ( '#autosuggesttext' ). text = itemData . title ;
$item ( '#container1' ). onClick (() => {
$w ( '#devicenameinput' ). value = itemData . title ;
$w ( '#autosuggestRepeater' ). collapse ();
});
}