HOW DO I CREATE A SEARCH BAR

Ask the community
,
1

HI! Im tring to make a search bar for my website but its really hard for me and I cant get any clear instructions.

I created a datebase, but now I want to create a search bar where you can insert a name or an ID number and the web site shows you the results that matches what you just typed.

PLEASE HELP!

2

Hello Daniel

creating the search bar will depend on what you are searching (database, repeater, table, …).
however, to show items that contain or equal what key a user enter you can set a filter with this key.

basic steps of how to do that:

  • add text input element
  • get the value (on key press / on button click / …)
  • set filter to the data set based oh this value
  • show the remaining data set items (in a repeater / table/ …)

here’s some useful links:

I hope this helps!
Massa

3

Oh my god. Thanks! My database is about contains information like names and IDs. What I want to make is a search bar where you can type a persons name or ID and then the paige shows you the results.

Do you know what I mean ?

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

5

would it be possible for you to create a video on this?

Or somehow help me with it?

What i’m trying to do is go from a site called tetrimus.xyz what i’m doing is having it so i can search from my database for like itemname OR they can search by demand, the demands are only like low, medium, high, extreme. I can’t seem to get it to work, i’ve tried like 50 tutorials. It’s so confusing, even the official wix one, it sucks.