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 http://wix.to/UcBnC-4 // 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)"} }
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 @Velo-Ninja linked to.