Search bar with prediction

Ask the community
,
1

Hello everyone,
i would like to make something as the following example:

A search bar with available matches. Also how can i achieve this in my database? for example a food website where u can search for an ingredient: if the user input is “cheese” , every dish with cheese will be displayed. But where do i add all my ingredients in the database? Do i need to work with tags?

Right now i work with a dropdown where the user can select a category but this is limited so i want to swap this with a user input…
this is my code:

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;
import { searchZipApplicableZipCodes } from ‘backend/postcodecalculator’ ;

export async function button9_click ( event ) {
// Add your code for this event here:

if ( $w ( ‘#input1’ ). value === “” ) $w ( “#text97” ). show ();
if ( $w ( ‘#input1’ ). value === “” ) { $w ( ‘#input1’ ). style . borderColor = “rgb(255,155,155)” }
if ( $w ( ‘#dropdown2’ ). value === “” ) $w ( “#text98” ). show ();
if ( $w ( ‘#dropdown2’ ). value === “” ) { $w ( ‘#dropdown2’ ). style . borderColor = “rgb(255,155,155)” }
if ( $w ( ‘#dropdown1’ ). value === “” ) $w ( “#text99” ). show ();
if ( $w ( ‘#dropdown1’ ). value === “” ) { $w ( ‘#dropdown1’ ). style . borderColor = “rgb(255,155,155)” }

let postcodeValue = $w ( ‘#input1’ ). value ;
let distanceValue = $w ( ‘#dropdown1’ ). value ;
let typeValue = $w ( “#dropdown2” ). value ;

let applicableZipCodes = await searchZipApplicableZipCodes ( postcodeValue , distanceValue );
let type = $w ( “#dynamicDataset” ). setFilter ( wixData . filter (). eq ( “type” , typeValue ). hasSome ( “zip” , applicableZipCodes ));

$w ( "#gallery1" ). collapse (); 
$w ( "#vectorImage69" ). collapse (); 
$w ( "#box16" ). collapse (); 
$w ( "#listRepeater" ). expand (); 
$w ( "#button54" ). expand ();

}

$w . onReady ( function () {
wixData . query ( “companies” )
. ascending ( “type” )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueItems = getUniqueItems ( results . items );
$w ( “#dropdown2” ). options = buildOptions ( uniqueItems );

});

function getUniqueItems ( items ){
const itemsOnly = items . map ( item => item . type );
return [… new Set ( itemsOnly )];
}

function buildOptions ( uniqueList ) {
return uniqueList . map ( curr => {
return { label : curr , value : curr };
});
}
});

export function button9_mouseOut ( 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:
$w ( “#text97” ). hide ();
$w ( “#text98” ). hide ();
$w ( “#text99” ). hide ();
{ $w ( ‘#input1’ ). style . borderColor = “rgb(26,46,84)” }
{ $w ( ‘#dropdown1’ ). style . borderColor = “rgb(26,46,84)” }
{ $w ( ‘#dropdown2’ ). style . borderColor = “rgb(26,46,84)” }
}

2

Take a look onto this example…
https://www.wix.com/velo/example/search-a-database

3

Hello Velo-Ninja,
thank you very much i was able to complete the tutorial and got a working code :). The problem is that i need to filter on multiple words… so lets say that the recipe for mashed potatoes is: salt, pepper, potatoes, milk, eggs i want to find this recipe entering 1 of these words. How can i add these ingredients to my database?

4

Regarding a search bar with a dropdown of suggestions, see the Repeater Dropdown example to see how this can be done. The dropdown could contain suggestions from a list of ingredients.

There are many ways that you can handle adding ingredients to your database. One way is by adding a text field that contains the various ingredients of a recipe. Another way would be to do a text search as the example that @russian-dima linked to.

5

Hello Yisrael, thank you for your answer. I was able to complete the repeater dropdown. However, as soon as i add more words in one textfield in my databasa i can’t find that particular recipe when i search for it on the websites input. It only works when there is 1 word in my daabase.

6

@shanivaneynde You’ll have to change the filter that you use. For example, instead of eq() , you probably want to use contains() . This is of course just a simple use case, and you might want to create more complex filters and searches. Refer to the WixDataFilter API for more options.

7

@yisrael-wix Thank you so much! Everything works for now. Thanks for the help!