Show image based on text value

Ask the community
,
1

Instead of adding images in the dataset one by one I want to display the images base on the text value result from a search.

I know its doable but my coding is wrong and couldn’t make it work. Hope anyone can provide me sample. Thanks!

$w.onReady(function () {

    const aoname = $w("#aoname").html = "Admin 1"

    if (aoname == "Admin 1") {
        console.log("Hello") // display Admin 1 image
    }
    else { console.log("Hi") // do not display image

    }

});

P.S. #aoname is a Text Element from a dataset search.

2

You want to show images out of your DATABASE → using an INPUT-TEXT-FIELD ?

But where is your code for all these actions?

  1. Where is your DATABASE ?
  2. Where is the code to get data out of DATABASE?
  3. Where is your filter-function (search-function) ?
  4. Do you use a DATASET? If so → where is the $w(‘#dataset1’)onReady() -code-part?

Take a look at this in parallel running-post and learn how to generate a multiple search-function by using a DATASET…

Then try to combine your own code-parts with the new knowledge.

3

No I want to show the image based on the given name after the search result (e.g. Admin 1, Admin 2).

Its just that these admins are assigned to multiple number codes and when users search for the number codes I want to display the image of the admin.

With that said, I don’t want to add the Admin’s image in the Database every time I assign a code for him instead I want to use if statements base on the search result (name). Currently here is my code.

import wixData from ‘wix-data’ ;

let debounceTimer ;

export function searchBar_keyPress ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
if ( event.key === “Enter” ) {

    $w ( "#clearSearch" ). show ( "fade" );     

    **if**  ( debounceTimer ) { 
        clearTimeout ( debounceTimer ); 
        debounceTimer  =  **undefined** ; 
    } 
    debounceTimer  =  setTimeout (() => { 
        **if**  ( $w ( "#searchBar" ). value ) { 
            filter($w ( "#searchBar" ). value ); 
        }  **else**  { 
            $w ( "#aorepeater" ). hide (); 
        } 
    },  200 ); 

} 

**let**  searchWord ; 

**function**  filter ( search ) { 
    **if**  ( searchWord  !==  search ) { 
        $w ( "#aodataset" ). setFilter ( wixData . filter (). eq ( 'accountCode' ,  search )); }  
        $w ( "#aorepeater" ). show (); 
        searchWord  =  search ; 
    }              



$w . onReady (() => { 

$w ( '#clearSearch' ). onClick (() => { 

    $w ( "#searchBar" ). value  =  **undefined** 
    $w ( "#aodataset" ). setFilter ( wixData . filter ()) 

    $w ( "#clearSearch" ). hide (); 
    $w ( "#aorepeater" ). hide (); 

    }) 
})

}

4

So now I created another dataset called #adminimages with the assigned images of each admin names and I want use this image after the user search for the code.

5 
import wixData from 'wix-data';

export function searchBar_keyPress(event) {
    let debounceTimer;  
    if (event.key === "Enter") {
        $w("#clearSearch").show("fade");   
        if (debounceTimer) {
            clearTimeout(debounceTimer);
            debounceTimer = undefined;
            let searchWord = $w("#searchBar").value;
            start_FilterEngine(searchWord);
        }
        else {}
    }
    else {}
}
    

$w.onReady(() => {console.log("Page ready.."); 
    $w("#aodataset").onReady(()=>{       
        //RESET-SEARCH...
        $w('#clearSearch').onClick(() => { 
            $w("#searchBar").value = undefined
            $w("#aodataset").setFilter(wixData.filter())
            $w("#clearSearch, #aorepeater").hide();
        });
    });
});

function start_FilterEngine(searchWord) {
    if (searchWord) {
        $w("#aodataset").setFilter(wixData.filter()
        .eq('accountCode', searchWord)); 
        $w("#aorepeater").show();
    } 
    else {}
}
6

Next time please connect a second parallel running post related to the same issue.

7

Thanks. This code is running BUT it does not load the images of my Admins.

8

There were some parts missing…should look something like…

import wixData from 'wix-data';

exportfunction searchBar_keyPress(event){let debounceTimer;
	if(event.key==="Enter"){
		$w("#clearSearch").show("fade");
		if(debounceTimer){  
			clearTimeout(debounceTimer);    
			debounceTimer = undefined;    
			debounceTimer = setTimeout(() => {
				if ($w("#searchBar").value) {
					filter($w("#searchBar").value); 
				} 
				else { 
					$w("#aorepeater").hide(); 
				}
			}, 200);
		}
	}
}
9

Take a look my dataset’s screenshot below

So I am going to add a lot of codes in the future and I am going to assign those codes to each of these admins. Now, to keep this untidy I do not want to add each admin’s images whenever I assigned a code to that admin.

10

Take a look my dataset’s screenshot below

So I am going to add a lot of codes in the future and I am going to assign those codes to each of these admins. Now, to keep this untidy I do not want to add each admin’s images whenever I assigned a code to that admin, instead I am going to assign that image for that admin thru a script of which I am puzzled to do so atm.