Table search

salihin-mja · January 19, 2022, 4:52am

Hi. I would like to create search filter like below. I start with insert data in content manager. But now pending what i should do now for the next step. Really appreciate for help to guide

Before enter in box

After

av-promotional · January 19, 2022, 11:56am

Attached is my most effective database search code. Of course you will need to match the fields and ID of the objects.
If you perform the search in ‘Enter’ or in the tab, then you will no longer need the search button. You can use it to refresh and cancel the search.

$w . onReady ( function () {
$w ( ‘#fullname’ ). onKeyPress (( event )=>{
let key = event . key ;
if ( key === “Enter” || key === “Tab” ) {
$w ( ‘#fullname’ ). blur ()
filter ()
}
} )
$w ( ‘#idnumber’ ). onKeyPress (( event )=>{
let key = event . key ;
if ( key === “Enter” || key === “Tab” ) {
$w ( ‘#idnumber’ ). blur ()
filter ()
}
} )
$w ( ‘#registration’ ). onKeyPress (( event )=>{
let key = event . key ;
if ( key === “Enter” || key === “Tab” ) {
$w ( ‘#registration’ ). blur ()
filter ()
}
} )

$w ( ‘#button’ ). onClick (( event )=>{
filter ()
//or
$w ( ‘#fullname’ ). value = null
$w ( ‘#idnumber’ ). value = null
$w ( ‘#registration’ ). value = null
$w ( “#dataset1” ). refresh ()

} )

})

let filter ;
export function filter ( ) {
filter = wixData . filter ();
if ( $w ( ‘#fullname’ ). value !== undefined && $w ( ‘#fullname’ ). value !== null && $w ( ‘#fullname’ ). value !== “” ) {
filter = filter . contains ( “fullname” , $w ( ‘#fullname’ ). value );
}
if ( $w ( ‘#idnumber’ ). value !== undefined && $w ( ‘#idnumber’ ). value !== null && $w ( ‘#idnumber’ ). value !== “” ) {
filter = filter . contains ( “idnumber” , $w ( ‘#idnumber’ ). value );
}
if ( $w ( ‘#registration’ ). value !== undefined && $w ( ‘#registration’ ). value !== null && $w ( ‘#registration’ ). value !== “” ) {
filter = filter . contains ( “registration” , $w ( ‘#registration’ ). value );
}

$w ( "#dataset1" ). setFilter ( filter );

}

salihin-mja · January 20, 2022, 4:32am

Hi Sir @AV digital

Thanks for your response . i try to match the field and id but i get this error at this part. But how to make the result show in box?

let filter;
export function filter() {
filter = wixData.filter();
if ($w(‘#ifullname’).value !== undefined && $w(‘#ifullname’).value !== null && $w(‘#ifullname’).value !== “”) {
filter = filter.contains(“ifullname”, $w(‘#ifullname’).value);
}
if ($w(‘#icompetent’).value !== undefined && $w(‘#icompetent’).value !== null && $w(‘#icompetent’).value !== “”) {
filter = filter.contains(“icompetent”, $w(‘#icompetent’).value);
}
if ($w(‘#ilocation’).value !== undefined && $w(‘#ilocation’).value !== null && $w(‘#ilocation’).value !== “”) {
filter = filter.contains(“ilocation”, $w(‘#ilocation’).value);
}

$w("#dataset1").setFilter(filter);

av-promotional · January 20, 2022, 5:23am

Please copy here all the code on the page from the beginning of the page.
By the way, note that you have to decide what the function of the button or search or refresh now leaving the two options it of course creates a collision

$ w (‘# button’). onClick ((event) => {
filter ()
// or

$ w (‘# fullname’). value = null
$ w (‘# idnumber’). value = null
$ w (‘# registration’). value = null
$ w (“# dataset1”). refresh ()

})

salihin-mja · January 20, 2022, 5:33am

Yes @av-promotional . i decide just search in enter but how to show the result in box like below

$w.onReady(function () {
$w(‘#ifullname’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#ifullname’).blur()
filter()
}
} )

$w(‘#icompetent’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#icompetent’).blur()
filter()
}
} )

$w(‘#ilocation’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#ilocation’).blur()
filter()
}
} )

$w(‘#ifullname’).value = null
$w(‘#icompetent’).value = null
$w(‘#ilocation’).value = null
$w(“#dataset1”).refresh()

} )

})

let filter;
export function filter() {
filter = wixData.filter();
if ($w(‘#ifullname’).value !== undefined && $w(‘#ifullname’).value !== null && $w(‘#ifullname’).value !== “”) {
filter = filter.contains(“ifullname”, $w(‘#ifullname’).value);
}
if ($w(‘#icompetent’).value !== undefined && $w(‘#icompetent’).value !== null && $w(‘#icompetent’).value !== “”) {
filter = filter.contains(“icompetent”, $w(‘#icompetent’).value);
}
if ($w(‘#ilocation’).value !== undefined && $w(‘#ilocation’).value !== null && $w(‘#ilocation’).value !== “”) {
filter = filter.contains(“ilocation”, $w(‘#ilocation’).value);
}

$w("#dataset1").setFilter(filter);

}

import wixData from ‘wix-data’;

export function button1_click(event) {
wixData.query(“data”).eq(“id”, $w(“#input1”).value).find()
.then((result)=>{
$w(“#text1”).text = result.items[0].results;
});
}

import wixData from ‘wix-data’;

export function button58_click(event) {
wixData.query(“competentperson”).eq(“ifullname”, $w(“#input1”).value).find()
.then((result)=>{
$w(“#text1”).text = result.items[0].results;
});
}

av-promotional · January 20, 2022, 5:40am

-------- Certainly you do not insert such characters in the code snippet.
import wixData from ‘wix-data’; Only once at the top of the page
Try the code below.
I did not understand what you’re trying to do in this code snippet:
export function button58_click (event) {
wixData.query (“competentperson”). eq (“ifullname”, $ w (“# input1”). value) .find ()
.then ((result) => {
$ w (“# text1”). text = result.items [0] .results;
});
}

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

$w ( '#ifullname' ). onKeyPress (( event ) => { 

    **let**  key  =  event . key ; 

    **if**  ( key  ===  "Enter"  ||  key  ===  "Tab" ) { 

        $w ( '#ifullname' ). blur () 

        filter () 

    } 

}) 

$w ( '#icompetent' ). onKeyPress (( event ) => { 

    **let**  key  =  event . key ; 

    **if**  ( key  ===  "Enter"  ||  key  ===  "Tab" ) { 

        $w ( '#icompetent' ). blur () 

        filter () 

    } 

}) 

$w ( '#ilocation' ). onKeyPress (( event ) => { 

    **let**  key  =  event . key ; 

    **if**  ( key  ===  "Enter"  ||  key  ===  "Tab" ) { 

        $w ( '#ilocation' ). blur () 

        filter () 

    } 

})

})

let filter1 ;

export function filter ( ) {

filter1  =  wixData . filter (); 

**if**  ( $w ( '#ifullname' ). value  !==  **undefined**  &&  $w ( '#ifullname' ). value  !==  **null**  &&  $w ( '#ifullname' ). value  !==  "" ) { 

    filter1  =  filter1 . contains ( "ifullname" ,  $w ( '#ifullname' ). value ); 

} 

**if**  ( $w ( '#icompetent' ). value  !==  **undefined**  &&  $w ( '#icompetent' ). value  !==  **null**  &&  $w ( '#icompetent' ). value  !==  "" ) { 

    filter1  =  filter1 . contains ( "icompetent" ,  $w ( '#icompetent' ). value ); 

} 

**if**  ( $w ( '#ilocation' ). value  !==  **undefined**  &&  $w ( '#ilocation' ). value  !==  **null**  &&  $w ( '#ilocation' ). value  !==  "" ) { 

    filter1  =  filter1 . contains ( "ilocation" ,  $w ( '#ilocation' ). value ); 

} 

$w ( "#dataset1" ). setFilter ( filter1 );

}

export function button1_click ( event ) {

wixData . query ( "data" ). eq ( "id" ,  $w ( "#input1" ). value ). find () 

    . then (( result ) => { 

        $w ( "#text1" ). text  =  result . items [ 0 ]. results ; 

    });

}
export function button58_click ( event ) {

wixData . query ( "competentperson" ). eq ( "ifullname" ,  $w ( "#input1" ). value ). find () 

    . then (( result ) => { 

        $w ( "#text1" ). text  =  result . items [ 0 ]. results ; 

    });

}

salihin-mja · January 20, 2022, 6:59am

sorry2 @av-promotional . Suppose this full coding. I decide choose search in “Enter”.

i want to create search bar like below

After key in full name, or other in search bar and “enter” the result should show like below in box

I have done create database at content manager like below. The search bar already create as below

Here database i create in content manager

$w.onReady(function () {
$w(‘#ifullname’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#ifullname’).blur()
filter()
}
} )

$w(‘#icompetent’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#icompetent’).blur()
filter()
}
} )

$w(‘#ilocation’).onKeyPress((event)=>{
let key = event.key;
if (key === “Enter” || key === “Tab”) {
$w(‘#ilocation’).blur()
filter()
}
} )

$w(‘#ifullname’).value = null

$w(‘#icompetent’).value = null
$w(‘#ilocation’).value = null
$w(“#dataset1”).refresh()

} )

})

let filter;
export function filter() {
filter = wixData.filter();
if ($w(‘#ifullname’).value !== undefined && $w(‘#ifullname’).value !== null && $w(‘#ifullname’).value !== “”) {
filter = filter.contains(“ifullname”, $w(‘#ifullname’).value);
}
if ($w(‘#icompetent’).value !== undefined && $w(‘#icompetent’).value !== null && $w(‘#icompetent’).value !== “”) {
filter = filter.contains(“icompetent”, $w(‘#icompetent’).value);
}
if ($w(‘#ilocation’).value !== undefined && $w(‘#ilocation’).value !== null && $w(‘#ilocation’).value !== “”) {
filter = filter.contains(“ilocation”, $w(‘#ilocation’).value);
}

$w("#dataset1").setFilter(filter);

}

salihin-mja · January 20, 2022, 9:24am

can help please @av-promotional

Topic		Replies	Views
Filter my pull-down search Ask the community code , question	2	165	October 4, 2017
Search Ask the community design	13	161	December 2, 2021
Problems with searchable database Ask the community code , question	1	96	April 15, 2020
Search keyword when press Enter... Ask the community code , question	19	1704	December 12, 2018
Trouble with code for user filtering of multiple columns in table connected to database Ask the community code , question	2	201	April 15, 2020

Table search

Related topics