HOW DO I CREATE A SEARCH BAR

Ask the community
,
4

Hello Daniel

If the result will always be one item then you can add a box that contains elements based on your data fields (example of data fields: id - name - image - description), based on the example the box will contain (text box - text box - image - text paragraph ). you will also need a text input (search bar) and optional search button. that’s how it’ll look:


properties of the elements (you can change them to satisfy your own case)

  • box - hidden on load
  • user not found msg - hidden on load
  • button - add on click event to add the code of searching to it.
  • text input / button - enabled by default

Now for the code part :

  • you need to get the user input
  • query the database to see if it matches one of the names or ids
  • if yes show the box that holds the data of the found item. if not found show the error msg.
    see the code bellow.
 export async function button1_click(event, $w) {
 //Add your code for this event here:
 let value =  $w('#input1').value
 let res_id = await wixData.query("search").eq("id",value).find();
 let res_name = await wixData.query("search").eq("name",value).find();
 let result;
 
 if (res_id.items.length){
 
        result= res_id.items[0];
        $w('#image1').src = result.image;
        $w('#text1').text = result.name;
        $w('#text2').text = result.id;
        $w('#text3').text = result.description;

        $w('#box1').show();
        $w('#userNotFoundText').hide();

    }
 else if (res_name.items.length) {
 
        result= res_name.items[0];
        $w('#image1').src = result.image;
        $w('#text1').text = result.name;
        $w('#text2').text = result.id;
        $w('#text3').text = result.description;

        $w('#box1').show();
        $w('#userNotFoundText').hide();
    }
 else{
        $w('#userNotFoundText').show();
        $w('#box1').hide();
    }
}

note that:
*this one simple example of search options, however you can use different ways or events (on key press, on blur, etc … ) and other coding techniques and absolutely different design lol.
*if more than one result could be shown i highly recommend using a repeater to show the results.

I hope you find this helpful :slight_smile:

Massa